Question

我正在努力将网站更改为响应式设计并使用Bootstrap 4.目前，我连续4列在大屏幕上看起来很好（我使用col-sm），但是当他们切换到堆叠模式时，我想填充列中有很多空白。

我的HTML中的相关部分：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-2 offset-md-2">
    <b>CVV2 Code</b>
    <asp:Label ID="lbl_cc_ccv2_reqd" runat="server" ForeColor="Red" Font-Bold="True" Text=""></asp:Label>
    <sup><a onclick="javascript: window.open('/Images/CVV2CodeHelp.GIF', 'myWin', 'toolbar=no, directories=no, location=no, status=no, menubar=no, resizable=no, scrollbars=no, width=570, height=160'); return false;"
                href="#">Help</a></sup>
  </div>
  <div class="col-sm-3">
    <asp:Label ID="lbl_cc_ccv2_err" ForeColor="Red" runat="server" Font-Size="X-Small"></asp:Label>

    <asp:TextBox ID="txt_cc_ccv2" runat="server" EnableViewState="False" MaxLength="4" autocomplete="off" columns="6" />
  </div>
  <div class="col-sm-2">
    <b>Billing ZIP code</b>
    <asp:Label ID="lbl_cc_zipcode_reqd" runat="server" ForeColor="Red" Font-Bold="True" />
  </div>
  <div class="col-sm-3">
    <asp:Label ID="lbl_cc_zip_err" ForeColor="Red" runat="server" Font-Size="X-Small">
    </asp:Label>
    <asp:TextBox ID="txt_cc_zip" runat="server" EnableViewState="False" MaxLength="5" autocomplete="off" Columns="6" />
  </div>
</div>

所以，我有4列看起来像这样：

CVV2 Code     [       ]       Billing Zip Code     [          ]

当我切换到堆叠模式时，我想让它们看起来更像这样：

CVV2 Code        Billing Zip Code
[        ]       [          ]

有没有办法在Bootstrap中执行此操作？

Answer 1

col-sm专门用于小屏幕，col-md用于平板电脑及以上版本。

假设您希望在一行中为桌面显示四个元素，并将它们堆叠到两行手机上，那么您要查看的是将所有现有类替换为md而不是sm的{{1}}，然后使用四个col-sm-6类：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-6 col-md-2 offset-md-2">
    <b>CVV2 Code</b>
    <asp:Label ID="lbl_cc_ccv2_reqd" runat="server" ForeColor="Red" Font-Bold="True" Text=""></asp:Label>
    <sup><a onclick="javascript: window.open('/Images/CVV2CodeHelp.GIF', 'myWin', 'toolbar=no, directories=no, location=no, status=no, menubar=no, resizable=no, scrollbars=no, width=570, height=160'); return false;"
            href="#">Help</a></sup>
  </div>
  <div class="col-sm-6 col-md-3">
    <asp:Label ID="lbl_cc_ccv2_err" ForeColor="Red" runat="server" Font-Size="X-Small">Blank</asp:Label>

    <asp:TextBox ID="txt_cc_ccv2" runat="server" EnableViewState="False" MaxLength="4" autocomplete="off" columns="6" />
  </div>
  <div class="col-sm-6 col-md-2">
    <b>Billing ZIP code</b>
    <asp:Label ID="lbl_cc_zipcode_reqd" runat="server" ForeColor="Red" Font-Bold="True" />
  </div>
  <div class="col-sm-6 col-md-3">
    <asp:Label ID="lbl_cc_zip_err" ForeColor="Red" runat="server" Font-Size="X-Small">Blank
    </asp:Label>
    <asp:TextBox ID="txt_cc_zip" runat="server" EnableViewState="False" MaxLength="5" autocomplete="off" Columns="6" />
  </div>
</div>

＆＃13;

请注意，我还将Blank放在ASP细分中，以显示它们的位置。

然而，假设您想要交换定位以使ASP组件排在其各自的移动设备标签下方，那就相当复杂了。您必须更改结构，以便每对元素形成一个独立的行，在行中嵌套行。

外柱应占据sm和md宽度的一半，而内柱应占据sm的整个宽度，但只占宽度的一半md。

您仍然可以在第一个外部列上隐藏offset-md-2，但您需要将其与col-md-4相关联（作为第二个外部列）是col-md-6，列总数需要12）。

请注意，点击“运行代码段”后，您可以点击“完整页面”＆＃39;看布局变化有效。

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-6 col-md-4 offset-md-2">
    <div class="row">
      <div class="col-sm-12 col-md-6">
        <b>CVV2 Code</b>
        <asp:Label ID="lbl_cc_ccv2_reqd" runat="server" ForeColor="Red" Font-Bold="True" Text=""></asp:Label>
        <sup><a onclick="javascript: window.open('/Images/CVV2CodeHelp.GIF', 'myWin', 'toolbar=no, directories=no, location=no, status=no, menubar=no, resizable=no, scrollbars=no, width=570, height=160'); return false;"
            href="#">Help</a></sup>
      </div>
      <div class="col-sm-12 col-md-6">
        <asp:Label ID="lbl_cc_ccv2_err" ForeColor="Red" runat="server" Font-Size="X-Small">Blank</asp:Label>
        <asp:TextBox ID="txt_cc_ccv2" runat="server" EnableViewState="False" MaxLength="4" autocomplete="off" columns="6" />
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-6">
    <div class="row">
      <div class="col-sm-12 col-md-6">
        <b>Billing ZIP code</b>
        <asp:Label ID="lbl_cc_zipcode_reqd" runat="server" ForeColor="Red" Font-Bold="True" />
      </div>
      <div class="col-sm-12 col-md-6">
        <asp:Label ID="lbl_cc_zip_err" ForeColor="Red" runat="server" Font-Size="X-Small">Blank
        </asp:Label>
        <asp:TextBox ID="txt_cc_zip" runat="server" EnableViewState="False" MaxLength="5" autocomplete="off" Columns="6" />
      </div>
    </div>
  </div>

＆＃13;

希望这有帮助！：）

Answer 2

这可以通过嵌入式.row和.col来解决：

<div class="row">
    <div class="col-5 offset-md-2">
        <div class="row">
            <div class="col-sm-5">
                <b>CVV2 Code</b>
            </div>
            <div class="col-sm-7">
                [ ]
            </div>
        </div>
    </div>

    <div class="col-5">
        <div class="row">
            <div class="col-sm-5">
                <b>Billing ZIP code</b>
            </div>
            <div class="col-sm-7">
                [ ]
            </div>
        </div>
    </div>
</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

请注意，我删除了<asp>标记，以便有一个更清晰的示例，但这不会改变本质。

Answer 3

我刚应用Grid来获得所需的结果。

.lab {
  display: block;
  background-color: green;
  border: 2px solid red;
  color: white;
  height: 40px;
  line-height: 40px;
}

.text {
  display: block;
  background-color: blue;
  border: 2px solid red;
  color: white;
  height: 40px;
  line-height: 40px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-6">
    <div class="row">
      <div class="col-sm-6 lab">Label 1</div>
      <div class="col-sm-6 text">Text 1</div>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="row">
      <div class="col-sm-6 lab">Label 2</div>
      <div class="col-sm-6 text">Text 2</div>
    </div>
  </div>
</div>

您可以省略CSS并在所需的位置添加HTML。

以堆叠模式放置2组彼此相邻的列

3 个答案: