2016-05-17 48 views
1

我正在使用引導程序,似乎無法將我的兩個底部左側和右側圖像與我的中間圖像對齊。左側和右側圖像比中間圖像短。我試圖改變底部margin和padding,但不會引起任何變化,引導程序中沒有排隊的圖像

下面的代碼:

<div class="col-lg-3"> 
        <div class="row"> 
         <div class="col-lg-12"> 
          <img class = "small-img img-responsive" src="https://s-media-cache-ak0.pinimg.com/564x/cf/91/3a/cf913a709d54494598ff43a5aa844931.jpg"> 
         </div> 
         <div class="col-lg-12"> 
          <img class = "btm-sml-img img-responsive" src="https://s-media-cache-ak0.pinimg.com/564x/cf/91/3a/cf913a709d54494598ff43a5aa844931.jpg"> 
         </div> 
        </div> 
       </div> 
       <div class="col-lg-6"> 
        <img class = "img-responsive" src="https://s-media-cache-ak0.pinimg.com/564x/cf/91/3a/cf913a709d54494598ff43a5aa844931.jpg"> 
       </div> 
       <div class="col-lg-3"> 
       <div class="row"> 
        <div class="col-lg-12"> 
         <img class = "small-img img-responsive" src="https://s-media-cache-ak0.pinimg.com/564x/cf/91/3a/cf913a709d54494598ff43a5aa844931.jpg"> 
        </div> 
        <div class="col-lg-12"> 
         <img class = "btm-sml-img img-responsive" src="https://s-media-cache-ak0.pinimg.com/564x/cf/91/3a/cf913a709d54494598ff43a5aa844931.jpg"> 
        </div> 
       </div> 

回答

0

的2個答案都不爲我工作,所以我繼續嘗試着去弄清楚這是一個非常簡單的修復最好的解決辦法:

簡直要被嵌套在另一列所需的大圖片。這一切都完全內聯,沒有任何CSS。

<div class="col-lg-3"> 
        <div class="row"> 
         <div class="col-lg-12"> 
          <img class = "small-img img-responsive" src="https://s-media-cache-ak0.pinimg.com/564x/cf/91/3a/cf913a709d54494598ff43a5aa844931.jpg"> 
         </div> 
         <div class="col-lg-12"> 
          <img class = "btm-sml-img img-responsive" src="https://s-media-cache-ak0.pinimg.com/564x/cf/91/3a/cf913a709d54494598ff43a5aa844931.jpg"> 
         </div> 
        </div> 
       </div> 
       <div class="col-lg-6"> 
        <div class="col-lg-12"> 
        <img class = "img-responsive" src="https://s-media-cache-ak0.pinimg.com/564x/cf/91/3a/cf913a709d54494598ff43a5aa844931.jpg"> 
       </div> 
       </div> 
       <div class="col-lg-3"> 
       <div class="row"> 
        <div class="col-lg-12"> 
         <img class = "small-img img-responsive" src="https://s-media-cache-ak0.pinimg.com/564x/cf/91/3a/cf913a709d54494598ff43a5aa844931.jpg"> 
        </div> 
        <div class="col-lg-12"> 
         <img class = "btm-sml-img img-responsive" src="https://s-media-cache-ak0.pinimg.com/564x/cf/91/3a/cf913a709d54494598ff43a5aa844931.jpg"> 
        </div> 
       </div> 
       </div> 
       </div> 
1

你需要有一個

<div class="container"> 

<div class="container-fluid"> 

包裝你的行,否則他們不會正常工作。

+0

這只是我整個頁面代碼的一小部分。我有一個容器設置在代碼的乞討,所以這不能解決問題。 – victoria

+0

不確定'container-fluid',但用'container' div包裝代碼的效果很好。我知道.container-fluid在寬度上佔100%的顯示,但居中取消了該選項。只是'.container'運作良好 – zipzit