Question

我有4列用于大屏幕，可在中型屏幕上显示2行2列。但随后用中等屏幕将列推下并向下移动。

我知道某个响应式实用程序类应该修复它，只是不确定如何。

这是我的代码

<style type="text/css">
    .form-control {
        width: auto;
        position: absolute;
    }
</style>

Answer 1

您必须将clearfix与utility class结合使用。由于您只是在col-md-6上折叠了所有内容，因此请在第二列之后应用clearfix（因为您需要两个@中）。

请参阅工作示例摘录。

＆＃13;

/*FOR DEMO ONLY*/

body {
  padding-top: 50px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-6">
      <div class="well">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
    <div class="col-lg-3 col-md-6">
      <div class="well">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
    <div class="clearfix visible-md-block"></div>
    <div class="col-lg-3 col-md-6">
      <div class="well">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
    <div class="col-lg-3 col-md-6">
      <div class="well">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
  </div>
</div>

＆＃13;

Bootstrap响应实用程序类

1 个答案: