2016-05-17 19 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