Question

我正在使用bootstrap中的布局。

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

________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>

Answer 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>

上面的操作是创建两个在较大的显示器上彼此相邻浮动的列，但是当分辨率小于750px时（将为col-sm-*选择的断点Bootstrap将折叠为行。

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

Bootstrap网格两列布局在小型设备上相互下降

1 个答案: