Question

我正在尝试在移动视图中使用Bootstrap 3创建此设计（here）。但是，我希望图像彼此相对，如this

这是我到目前为止所做的：

HTML：

<div class="container">
        <div class="row">
            <div class="col-md-6"><img src="http://www.dialhousehotel.com/wp-content/uploads/2017/09/room-5.jpg" alt="Picture of room one" class="img-responsive" width="500px" height="300px"></div>
            <div class="col-md-6">
                <div class="rooms-photo-text">
                    <h2><span style="color: #bb9b50;">Cosy<br>
</span></h2>
                    <p>Our Cosy double rooms are small but perfectly appointed for your stay. Each one has a double bed and views out to the garden from the main house.</p>
                    <div class="wideSeparatorDark"></div>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="col-md-6 col-md-pull-6"><img src="http://via.placeholder.com/500x300" alt="Picture of room two" class="img-responsive" width="500px" height="300px"></div>
            <div class="col-md-6 col-md-push-6">
                <div class="rooms-photo-text">
                    <h2><span style="color: #bb9b50;">Splendid<br>
</span></h2>
                    <p>Our Splendid rooms are more spacious than the Cosy and located in both the main house and the coach house building. Beautifully appointed with Cotswolds charm.</p>
                    <div class="wideSeparatorDark"></div>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="col-md-6"><img src="http://via.placeholder.com/500x300" alt="Picture of room three" class="img-responsive" width="500px" height="300px"></div>
            <div class="col-md-6">
                <div class="rooms-photo-text">
                    <h2><span style="color: #bb9b50;">Awesome<br>
</span></h2>
                    <p>Our Awesome rooms are wonderfully comfortable, similar to the Splendid but with stunning views of the village and River Windrush. These truly sumptuous rooms are the perfect place to relax and call ‘home from home’.</p>
                    <div class="wideSeparatorDark"></div>
                </div>
            </div>
        </div>
    </div>

第二组col-md-6之间似乎存在差距。似乎没有修复列重叠。 codepen是https://codepen.io/anon/pen/pabRJg

Answer 1

您应该反转推/拉列...

            <div class="clearfix"></div>
            <div class="col-md-6 col-md-push-6"><img src="http://via.placeholder.com/500x300" alt="Picture of room two" class="img-responsive" width="500px" height="300px"></div>
            <div class="col-md-6 col-md-pull-6">
                <div class="rooms-photo-text">
                    <h2><span style="color: #bb9b50;">Splendid<br>
</span></h2>
                    <p>Our Splendid rooms are more spacious than the Cosy and located in both the main house and the coach house building. Beautifully appointed with Cotswolds charm.</p>
                    <div class="wideSeparatorDark"></div>
                </div>
            </div>
            <div class="clearfix"></div>

https://codepen.io/anon/pen/RQRKLd

<div class =“clearfix”> </div>导致我的列之间出现间隙

1 个答案: