twitter-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/