1

我正在尝试使用 Bootstrap 构建我的 UI。我正在尝试将 3 合二为一设置divs为row中型和大屏幕。在下面，768px我想把它们放在另一个下面。

文件.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>

三个divs 的 HTML 代码是相同的。

问题

div在大屏幕和中屏幕上，我在一行中有两个s，在新行下面有一个第三个。对于平板电脑屏幕，divs 不会在另一个下流动，但仍然在同一行中。我想要的布局是两个在一行中，第三个在下面。

文件.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 文档时，我认为将类命名为.col-md-4将我div的 s对齐768px在同一行中，彼此相邻并在下方将它们放在一种display: box视图中。

4

4 回答 4

2

没有使用@media only screen and all ，这将起作用：

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

于 2018-05-24T18:08:05.093 回答
1

您需要将 file.html 中的所有代码放在带有类行的 div 中并再次测试。

于 2018-05-24T12:54:06.027 回答
0

转到此链接以获取引导列（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 ) {
    }
于 2018-05-24T12:44:50.913 回答
0

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

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

于 2018-05-24T13:16:28.210 回答