Html 如何使用引导在列中嵌套行

我一直试图以这样一种方式编码，即使屏幕像手机屏幕一样小，布局看起来也不错

下面是我如何编写代码的

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

}

---

结果在桌面和平板电脑上看起来不错，但在较小的屏幕上，右端的瓷砖垂直显示在幻灯片下方。我应该如何水平显示它们？或者至少像一排两块瓷砖。这就是我使用col-xs-6的原因，没有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>

---

其他班级也一样。

谢谢罗宾·卡洛。刚才我还添加了CSS代码。

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