Bootstrap 網格特定布局

Question

我如何制作這樣的引導網格？ 如果≥576px：

如果 < 576 像素：

謝謝你。

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>

等等......並在smaller-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>