Question

我正在使用Bootstrap，似乎无法将我的两个左下和右下图像与我的中间图像对齐。左图像和右图像比中间图像短。我已经尝试更改底部边距和填充，但这不会导致任何更改，

以下是代码：

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

Answer 1

你需要一个

<div class="container">

或

<div class="container-fluid">

包裹你的行，否则它们无法正常工作。

Answer 2

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

图像没有在Bootstrap中排队

2 个答案: