Question

我正在尝试使用Bootstrap构建我的UI。我试图在一个divs中将3 row设置为彼此相邻，用于中型和大型屏幕。并为在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文档时，我认为将该类命名为.col-md-4会使我的div在768px以上display: box位于同一行中，彼此相邻并位于下方将它们放在<div (click)='scrollDown()'>Scroll down</div>视图中。

Answer 1

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

Answer 2

theres不使用@media only屏幕和所有，这将起作用：

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

Answer 3

转到此Link以获取引导列（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 4

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

您的容器流体可让您使用整个屏幕宽度，但它仍然只是一个包含行和列的容器。您创建行，然后添加列。如：

<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。您可以根据需要拥有尽可能多的列。如果您调整了代码，那么在查看媒体查询方面之前，您应该开始获取一些您正在寻找的结果。

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

4 个答案: