html - 无法在页脚内内联安排两个 Bootstrap 的按钮

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% 连续。