Question

我有4个控件，想要显示在col-12网格系统中。

当我使用下面的代码时，它在桌面上工作正常，但在移动设备上，此代码将第三个控件浮动在右侧。如下图所示'Plate State'低于HBU5XD。我希望它低于许可证状态

有人可以帮我吗？

谢谢

如是

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
   
   <div class="row form-group" style="margin-top: 10px;" id="trans">

            <label class="control-label col-md-2 col-sm-3 col-xs-3" for="number" id="label">License Plate:</label>
            <div class="col-md-2 col-sm-3 col-xs-9"> HBU5XD</div>

            <label class="control-label col-md-2 col-sm-3 col-xs-3" for="state" id="label">Plate State:</label>
            <div class="col-md-2 col-sm-3 col-xs-9"> Nebraska </div>
    </div>
    </div>

Answer 1

您只需将每个控件设置为col-xs-6，以确保其中两个控件并排放置在每一行上。这适用于移动设备和任何更大的设备。您还需要强制标签的下边距为0，因为这是导致它们浮动的原因。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">

  <div class="row form-group" style="margin-top: 10px;" id="trans">

    <label class="control-label col-xs-6" for="number" id="label" style="margin-bottom:0px">License Plate:</label>
    <div class="col-xs-6"> HBU5XD</div>

    <label class="control-label col-xs-6" for="state" id="label" style="margin-bottom:0px">Plate State:</label>
    <div class="col-xs-6"> Nebraska </div>
  </div>
</div>

Answer 2

这是一个浮动清算问题。最简单但最不优雅的解决方案是在两个内容区域之间应用.clearfix：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-body">
  <div class="row form-group" style="margin-top: 10px;" id="trans">
    <label class="control-label col-md-2 col-sm-3 col-xs-3" for="number" id="label">License Plate:</label>
      <div class="col-md-2 col-sm-3 col-xs-9"> HBU5XD</div>
      
      <div class="clearfix visible-xs"></div>

      <label class="control-label col-md-2 col-sm-3 col-xs-3" for="state" id="label">Plate State:</label>
      <div class="col-md-2 col-sm-3 col-xs-9"> Nebraska </div>
  </div>
</div>

＆＃13;

为什么col-xs-3使用offset发送下一个控件

2 个答案: