我有以下帶有bootstrap的HTML元素:
<div class="panel-footer">
<button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
</div>
如果您看到有一個(gè)灰色區(qū)域(面板-頁(yè)腳):
按鈕也使用了pull-right類，它是float:right，但是我希望灰色區(qū)域(實(shí)際上是面板頁(yè)腳div)適合按鈕的高度。
這是面板頁(yè)腳的樣式:
這是向右拉的:
有線索嗎？
更新:
我在按鈕后補(bǔ)充道:
<div class="clearfix"></div>這似乎解決了問(wèn)題?？梢詥?？
你可以試試這個(gè)(自舉3)
<div class="panel-footer text-right">
<button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
</div>你只需要添加文本右類到你的面板頁(yè)腳。
它對(duì)我有用。
更新(2023年1月11日) 自舉5 使用類text-end使按鈕向右側(cè)重新對(duì)齊。
.panel-footer {
background: #e9e9e9;
border-top: 0;
padding: 10px 15px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
</head>
<body class="p-4">
<div class="panel-footer text-end">
<button class="btn btn-primary">Primary button</button>
</div>
</body>
</html>我用jsFiddle運(yùn)行了您提供的代碼，得到了相同的結(jié)果。即使將按鈕放在默認(rèn)的面板中，仍然會(huì)得到相同的結(jié)果。
這里有一個(gè)解決辦法。
我創(chuàng)建了一個(gè)jsFiddle
它包括兩個(gè)示例，一個(gè)使用您的代碼和一個(gè)使用panel panel-default和panel-body和css覆蓋。
希望有幫助。
.panel-footer {
height: 50px !important;
}
#sep {
margin-top: 10px;
}
.panel-body {
background: #f3f3f3 !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet"/>
<div class="panel-footer">
<button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
</div>
<div id="sep"></div>
<div class="panel panel-default">
<div class="panel-body">
<button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
</div>這對(duì)我很有效。
<div class="footer">
<a href="#" id="btnSave" class="pull-right btn btn-primary">Save</a>
</div>這將正常工作。
你可以右對(duì)齊你的文本來(lái)移動(dòng)你的按鈕到右邊，但是當(dāng)你有一個(gè)圖像作為一個(gè)按鈕或者頁(yè)腳中的其他不是文本的東西時(shí)，它就不起作用了。
正確的方法是在面板頁(yè)腳div中添加clearfix類。即
而不是這個(gè):
<div class="panel-footer">
<button type="button" class="btn btn-primary pull-right">Save</button>
</div>您應(yīng)該使用:
<div class="panel-footer clearfix">
<button type="button" class="btn btn-primary pull-right">Save</button>
</div>我認(rèn)為，這個(gè)問(wèn)題已經(jīng)在op的問(wèn)題中解決了，但是用clearfix類對(duì)元素進(jìn)行了不同的放置。
在codepen:https://codepen.io/jamsshhayd/pen/zYMGPOR上查看
