如何使用引導程序在列中嵌套行

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; 

}

結果看起來臺式機和平板電腦好，但在較小的屏幕瓷磚結束顯示在幻燈片下方垂直。我應該怎麼做才能水平顯示它們？或者至少像連續兩塊瓷磚一樣。這就是我使用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> 

，去做一些其他類。