html - 如何使用 Bootstrap 在列中嵌套行

Question

我一直在尝试以这样一种方式进行编码，即使屏幕与移动屏幕一样小，布局看起来也不错。

下面是我尝试编码的方式

<div class="row" id="slide_show">
  <div class="col-md-9 col-sm-9 col-xs-12">
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img id="img1" src="img1.jpeg">
      </div>
      <div class="item">
        <img id="img1" src="img2.jpeg">
      </div>
      <div class="item">
        <img id="img1" src="img3.jpeg">
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-3 col-xs-12">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-6" id="Tiles">
        <img id="img_tiles" src="Calendar.gif" />
        <div class="textbox">
          <p class="text" align="center"><i><b>Events at calendar 
            <br />click to know the details about events this year..</b></i>
          </p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-6" id="Tiles">
        <img id="img_tiles" src="travel.jpg" />
        <div class="textbox">
          <p class="text" align="center"><i><b>Events at calendar 
            <br />click to know the details about events this year..</b></i>
          </p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-6" id="Tiles">
        <img id="img_tiles" src="vacancy.jpg" />
        <div class="textbox">
          <p class="text" align="center"><i><b>Events at calendar 
            <br />click to know the details about events this year..</b></i>
          </p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-6" id="Tiles">
        <img id="img_tiles" src="info.jpg" />
        <div class="textbox">
          <p class="text" align="center"><i><b>Events at calendar 
            <br />click to know the details about events this year..</b></i>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS代码

 #Tiles {
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s; 


  overflow:hidden;
  width:200px;
  height:150px;
  padding-left:0px;

    margin-left:30px;
    border:1px solid #CCC;
  padding-top: 0px;
  margin-top:40px;
  position:relative;
}

#Tiles .textbox {
  position:absolute;
  top:0;
  left:0;
  width:200px;
  height:150px;
  margin-left:-210px;
}

#Tiles:hover .textbox {
  margin-left:0;
}

#Tiles img {
  margin-left:0;
}

#Tiles:hover img {
  margin-left:210px;
}

.text {
  padding-top: 40px;
}

#Tiles img, .textbox {
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}

#img_tiles{
 width:200px;
 height:165px;
 padding-top:0px; 
 padding-bottom:15px;

结果在台式机和平板电脑上看起来不错，但在较小的屏幕上，右端的图 block 垂直显示在幻灯片放映下方。我应该怎么做才能水平显示它们？或者至少像两 block 连续的瓷砖。这就是我使用 col-xs-6 的原因

Answer 1

没有你的 css 很难知道代码。

但是您可以尝试将您的超小型列类更改为 col-xs-12所以它将占用整个宽度而不是 50%

所以你最终得到了这个示例代码:

  <div class="col-md-12 col-sm-12 col-xs-12" id="Tiles">
    <img id="img_tiles" src="info.jpg" />
    <div class="textbox">
       <p class="text" align="center"><i><b>Events at calendar 
          <br />
          click to know the details about events this year..</b></i>
       </p>
     </div>
  </div>

对其他类也这样做。