引导网格两列布局在小型设备上相互放置答案

【问题标题】：Boostrap grid two column layout to drop under each other on small device引导网格两列布局在小型设备上相互放置
【发布时间】：2014-11-15 21:50:56
【问题描述】：

我正在努力解决引导程序中的布局问题。

在普通桌面环境中我有这个布局

________col1________________col2_________
|firstname + input  |  Email + input    |
|lastname + input   |  Telephone + input|
|etc                |                   |
-----------------------------------------

当在移动设备上查看页面时，我希望第 2 列放在第 1 列下。此时电子邮件被推送到名字下。顺序变为名字、电子邮件、姓氏、电话等

这是我到目前为止的 html。解决这个问题可能很简单，但到目前为止还没有运气。在下面的代码中，我的行当然是一个问题，但是将其包装在两个 col-xx-6 列中不起作用

<div class="row">
    <div class="col-sm-2">
        <label class="control-label">Bedrijfsnaam</label>
    </div>
    <div class="col-sm-4">
        <span data-bind="text: name"></span>
    </div>
    <div class="col-sm-2">
        <label class="control-label">Straat</label>
    </div>
    <div class="col-sm-4" data-bind="with: address">
        <span data-bind="text: street"></span>
    </div>
</div>
<div class="row">
    <div class="col-sm-2">
        <label class="control-label">E-mailadres</label>
    </div>
    <div class="col-sm-4">
        <span data-bind="text: email"></span>
    </div>
    <div class="col-sm-2">
        <label class="control-label">Nummer</label>
    </div>
    <div class="col-sm-4" data-bind="with: address">
        <span data-bind="text: number"></span>
    </div>
</div>
<div class="row">
    <div class="col-sm-2">
        <label class="control-label">Website</label>
    </div>
    <div class="col-sm-4">
        <span data-bind="text: website"></span>
    </div>
    <div class="col-sm-2">
        <label class="control-label">Achtervoegsel</label>
    </div>
    <div class="col-sm-4" data-bind="with: address">
        <span data-bind="text: numberext"></span>
    </div>
</div>
<div class="row">
    <div class="col-sm-2">
        <label class="control-label">KvK nummer</label>
    </div>
    <div class="col-sm-4">
        <span data-bind="text: coCnumber"></span>
    </div>
    <div class="col-sm-2">
        <label class="control-label">Postcode</label>
    </div>
    <div class="col-sm-4" data-bind="with: address">
        <span data-bind="text: postalcode"></span>
    </div>
</div>

【问题讨论】：

标签： css twitter-bootstrap-3 responsive-design

【解决方案1】：

这可以通过 Bootstrap 的网格系统轻松完成。以下将为您工作

<div class="row">
  <div class="col-sm-6">
    <!-- column 1 stuff here -->
  </div>
  <div class="col-sm-6">
    <!-- column 2 stuff here -->
  </div>
</div>

上面所做的是创建两列，它们将在较大的显示器上彼此相邻浮动，但当分辨率小于 750 像素时会折叠成行（Bootstrap 为 col-sm-* 选择的断点。

不要忘记，Bootstrap 要求您将内容包装在 .container 类中。更多信息在这里http://getbootstrap.com/css/#overview-container

【讨论】：