引导网格特定布局答案

【问题标题】：Bootstrap grid specific layout引导网格特定布局
【发布时间】：2018-04-04 14:51:55
【问题描述】：

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

如果

谢谢。

【问题讨论】：

它会自动为您执行此操作，但您也可以随时添加自定义媒体查询。
到目前为止你试过了吗？这不是我网站的免费编码

【解决方案1】：

 <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>

【讨论】：

【解决方案2】：

每个引导行包含 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>

希望这会有所帮助！ :)

【讨论】：

【解决方案3】：

Bootstrap 的 col-xs-$ 的最小最大宽度为 768 像素。我认为您必须在列中添加另一个类，然后为该类指定您的 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;
  }
  }

【讨论】：