Bootstrap网格调整

Question

请参阅下面的截图。在浏览器中查看时，我想在右上角堆叠这两个按钮。当我缩小浏览器时，我仍然希望它们彼此相邻，但它们彼此重叠。

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-8">
             <H1 class="title">New Business</H1></div>
            <div class="col-xs-6 col-md-4"><H5 class="title" > Test Name </H5></div>
    </div>
</div>
<div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-8">
        <button type="button" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-log-out"></span> LogOut
        </button>
     </div>
      <div class="col-xs-6 col-sm-6 col-md-4">
      <button type="button" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-log-out"></span> LogOut
      </button>

      </div>
    </div>
</div>

Answer 1

要让两个按钮位于屏幕右侧的一列中，请执行以下操作：

您需要用以下内容替换行的内容：

<div class="col-xs-12 btn-lg-container">
    <button type="button" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-log-out"></span> LogOut
    </button>
    <button type="button" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-log-out"></span> LogOut
    </button>
</div>

您还需要添加此CSS：

.btn-lg-container {
    text-align:right;
}

您的代码将每个按钮放入其自己的列中。其中一列占据了小型设备屏幕的整个宽度，将每个按钮放在较小的屏幕上。我的代码只创建一个列，其中包含两个按钮。然后CSS将两个按钮对齐到屏幕右侧。

JSFiddle：http://jsfiddle.net/jdwire/59K2N/3

要使每个按钮位于其自己的列中并位于列的左侧：

在第一个按钮上，您需要将col-xs-12更改为col-xs-6，否则当屏幕超小时，第一个按钮将始终占据整个宽度。

JSFiddle：http://jsfiddle.net/jdwire/59K2N/