Question

尝试使用buttons库使用两个Bootstrap制作页脚。每个按钮应该是50％宽度，但不是放在同一行，第二个按钮移动到新行。如果我将按钮的宽度更改为49％，一切正常。我添加了box-sizing: border-box;，但没有帮助。

有我的HTML代码：

.footer{
    background-color: lime;
    bottom: 0;
    height: 10vh;
    position: absolute;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.footer > button{
	width: 50%;
	height: 100%;
	border-radius: 0px;
	box-sizing: border-box;
}

<div class="footer">
    <button type="button" class="btn btn-primary btn-lg">Save</button>
    <button type="button" class="btn btn-default btn-lg">Close</button>
</div>

我的代码：http://codepen.io/anatoly314/pen/VezEOJ

更新：实际上我的问题是众所周知的问题的一部分，在本主题中有更广泛的涵盖：Ignore whitespace in HTML，我不会关闭它，因为人们已经回答但建议你寻找上述主题的解决方案。

Answer 1

在bootstrap中你必须使用列，你可以在他们的文档中阅读它。

<div class="row">
  <div class="col-md-6">
     <button type="button" class="btn btn-primary btn-lg">Save</button>
  </div>
  <div class="col-md-6">
     <button type="button" class="btn btn-default btn-lg">Close</button>
  </div>
</div>

所以100％的宽度是md-12，那么你可以玩这个数字，6/6是连续50％的两列。

Answer 2

这是因为display: inline-block依赖于空白，元素不会粘在一条线上。编辑html并删除按钮之间的空白区域以修复它：

<div class="footer">
    <button type="button" class="btn btn-primary btn-lg">Save</button> 
    <button type="button" class="btn btn-default btn-lg">Close</button>
</div>

或者您可以使用html评论：

<div class="footer">
    <button type="button" class="btn btn-primary btn-lg">Save</button><!--
    --><button type="button" class="btn btn-default btn-lg">Close</button>
</div>

Answer 3

尝试将您的HTML代码更改为以下内容：

<div class="footer">
    <button type="button" class="col-sm-6 btn btn-primary btn-lg">Save</button>
    <button type="button" class="col-sm-6 btn btn-default btn-lg">Close</button>
</div>

你可以使用bootstrap类来帮助你按钮的大小，而不仅仅是div元素

Answer 4

您可以找到有效的codepen here。我建议你看看Bootsrap's Grid system。

.footer {
  background-color: lime;
  bottom: 0;
  height: 10vh;
  position: absolute;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.footer > .row {
  margin: 0;
}

.footer > .row > div {
  margin: 0;
}

.footer button {
  height: 100%;
  border-radius: 0;
}

<div class="footer">
  <div class="row">
    <div class="col-xs-6">
      <button type="button" class="btn btn-primary btn-lg btn-block">Save</button>
    </div>
    <div class="col-xs-6">
      <button type="button" class="btn btn-default btn-lg btn-block">Close</button>
    </div>
  </div>
</div>

无法在页脚内排列两个Bootstrap按钮

4 个答案: