Bootstrap网格特定布局

Question

如何制作这样的引导网格？ 如果≥576px：

如果＆lt; 576px：

谢谢。

Answer 1

Bootstrap的col-xs- $最大宽度为768px。我认为您必须在列中添加另一个类，然后将CSS规则指定给该类

例如：

 <div class="col-xs-4 smaller-div-class">
   Col 1
 </div>
 <div class="col-xs-4 smaller-div-class">
   Col 2
 </div>
 <div class="col-xs-4 smaller-div-class">
   Col 3
 </div>

依此类推......并在small-div-class

中添加样式

 @media screen and (max-size<576px){
  .smaller-div-class{
    width: 100% !important;
  }
  }

Answer 2

每个Bootstrap行包含12列，每列应限制在一行。

考虑到您需要三列，您应指定每列的宽度为4列，12 / 3 = 4。这是通过使用col-sm-4作为类名来完成的。

列的col-sm-前缀基于“小”屏幕尺寸，实际上默认为您想要的576px的确切宽度：

这可以在以下示例中看到：

.one {
  background: red;
}

.two {
  background: blue;
}

.three {
  background: green;
}

.col-sm-4 {
  height: 50px;
}

<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-4 one"></div>
  <div class="col-sm-4 two"></div>
  <div class="col-sm-4 three"></div>
</div>

希望这有帮助！ ：）

Answer 3

 <div class="container">
    <div class="row">
        <div class="col-sm-4 col-12">
            <h2>col1</h2>
        </div>
        <div class="col-sm-4 col-12">
            <h2>col2</h2>
        </div>
        <div class="col-sm-4 col-12">
            <h2>col3</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4 col-12">
            <h2>col4</h2>
        </div>
        <div class="col-sm-4 col-12">
            <h2>col5</h2>
        </div>
        <div class="col-sm-4 col-12">
            <h2>col6</h2>
        </div>
    </div>
</div>