Question

我正在学习如何使用Twitter Bootstrap。我需要在一行中放两个按钮，一个在中间，另一个在右边。按钮位于列的正确位置，但它们位于不同的行中。任何人都可以帮我修复下面的代码，让两个按钮在同一行吗？

<div class="row"> 
    <div class="col-sm-6">
        <p class="lead pull-right"><button class="btn btn-default ">Edit Button left</button></p>
    </div> 
    <div class="col-sm-6 col-sm-offset-6">
        <button class="btn btn-default lead pull-right ">Edit Button Right</button>
    </div>      
</div>

Answer 1

问题是你的第二个div类使用了col-sm-offset-6。删除它，它应该在同一行上对齐。

使用偏移将为您提供6列的左边距，并且由于您的第一个div已经使用了6列，因此在同一行上没有足够的列。

Answer 2

我同意上面的回答，这是来自bootstrap页面的代码，它有一些相当清晰的例子：http://getbootstrap.com/css/

<div class="col-sm-9">
<div class="row">
  <div class="col-xs-8 col-sm-6">
    <p class="lead pull-right"><button class="btn btn-default ">Edit Button left</button></p>
  </div>
  <div class="col-xs-4 col-sm-6">
    <p class="lead pull-right"><button class="btn btn-default ">Edit Button Right</button></p>
  </div>
</div>

它确实在按钮之间留下了空格，我不知道你是否想要那里。

Twitter Bootstrap 2对象在同一行

2 个答案: