使用 Bootstrap 为不同的屏幕设置列类

Question

我正在尝试使用 Bootstrap 构建我的 UI。我正在尝试将 3 divs 设置为 3 divs in one row for medium and large screens。而对于在 768px 下面我想把它们一个放在另一个下面。

file.html

<section className="about" id="about">
  <div className="container-fluid">
   <div className="row boxes justify-content-md-center">
    <div className="col-sm-12 col-md-4 box">
    <div className="innerBox">
      <div className="icons">
        <img src={iconEducation} className="img-responsive" />
      </div>
      <div className="box-body">
        <h3 className="box-title">Title </h3>

        <div className="box-list">
          <div className="box-list-items">
            <div className="item-ul"><img src={dot} className="img-responsive" /></div>
            <div>
              <p>Text</p>
            </div>
          </div>
          <div className="box-list-items">
            <div><img src={dot} className="img-responsive" /></div>
            <div className="item-ul">
              <p>Text</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>

所有三个 div 的 HTML 代码都相同。

问题

在大屏幕和中屏幕上，我在一行中有两个 div，在新行的下方有第三个。对于平板电脑屏幕，div 不会一个接一个地排列，但仍然在同一行中。我想要的布局是两排一排，第三排在下面。

file.css

.about{
  padding: 127px 0 196px 0;
}

.about .row.boxes >div{
  margin: 0 20px 0 20px;
}

.about .box{
  height: 550px; 
  width: 100%;
  background-image: linear-gradient(144deg, #fdfdfd, #f9f9f9);
}
.about .innerBox{
  margin: auto;
  color: black;
  width: 100%;
  overflow: hidden;
}
.box-list-items > div {
  display: inline-block;
}

.box-list-items img {
  height: 35%; 
  width: 35%;
}

.icons { 
  height: 95px; 
  width: 95px;
  float: right;
  margin: 7% 5% 5% 0;
}
.icons img {
  width: 100%;
  height: 100%;
}


h3.box-title{
  font-size: 2.7em;
}

当我浏览 Bootstrap 文档时，我认为将 class 命名为 .col-md-4 会使我的 div 与上面的 768px 对齐同一行彼此相邻并在下方会将它们放置在某种 display: box 视图中。

Answer 1

转到此 Link 以获得 bootstrap 列（col-lg-4、col-md-4、col-sm-6、col-xs-12）

并根据您的设备遵循这些媒体查询。

    @media only screen and (min-width:1024px) and (max-width: 1200px) {
    }

    @media only screen and (min-width:992px) and (max-width: 1023px) {

    }
    @media only screen and (min-width:768px) and (max-width: 991px) {

    }
    @media only screen and ( max-width: 767px ) {
    }
    @media only screen and ( max-width: 479px ) {
    }

Answer 2

您需要将 file.html 中的所有代码放在 div 行的 class 行中，然后再次测试。

Answer 3

@user9347049 这不适合评论，所以为了清楚起见，我把它放在这里。

您的 container-fluid 允许您使用屏幕的整个宽度，但它仍然只是一个容器，包含您的行和列。您创建行，然后添加列。如：

<div class="container"> <!-- you can change this class to container-fluid class if you like -->
    <div class="row">
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
        </div>
    </div>
</div>

您只能拥有一个容器class。 div 行包含该行的所有列 div。您可以根据需要拥有任意多行的列。如果你调整你的代码，你应该在查看它的媒体查询端之前开始获得你正在寻找的一些结果。

Answer 4

没有使用@media only screen 和所有，这会起作用：

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">abc</div>
    <div class="col-xs-12 col-sm-4  col-md-4 col-lg-4">xyz</div>
    <div class="col-xs-12 col-sm-4  col-md-4 col-lg-4">123</div>
  </div>
</div>

您可以查看： https://jsfiddle.net/bfos8ttd/

使用 Bootstrap 为不同的屏幕设置列类

Setting column classes for different screens using Bootstrap

html

css

twitter-bootstrap

bootstrap-grid

使用 Bootstrap 为不同的屏幕设置列 类

Setting column classes for different screens using Bootstrap

html

css

twitter-bootstrap

bootstrap-grid

使用 Bootstrap 为不同的屏幕设置列类