Question

它在大屏幕上运行良好，但在移动设备上它被分成两行。左边是一张图片，右边是另一张图片。

HTML：

       <div class="container">
            <div class="row">

                <div class="col-md-6 r"> 
                     <img src="img/qr.gif"> <br />
                    <p><small>HERE IS TITLE</small></p> 
                </div>


                <div class="col-md-6 l">
                    <img src="img/weixin.gif"> <br />
                    <p><small>HERE IS TITLE</small></p>                      
                </div>

            </div>
        </div>

CSS

 .l{text-align: left; padding-top: 10px;}
 .r{text-align: right; padding-top: 10px;}

Answer 1

您可以使用float：

HTML：

<center>
<div class="container">
            <div class="row">

                <div class="col-md-6 r"> 
                     <img src="img/qr.gif"> <br />
                    <p><small>HERE IS TITLE</small></p> 
                </div>


                <div class="col-md-6 l">
                    <img src="img/weixin.gif"> <br />
                    <p><small>HERE IS TITLE</small></p>                      
                </div>

            </div>
        </div>
    </center>

CSS：

 .l{display: block; padding-top: 10px; float: left; }
 .r{display: block; padding-top: 10px; float: right;}

http://jsfiddle.net/2jag6/

Answer 2

尝试在第一张图片上使用.pull-right，在第二张图片上使用.pull-left。没有理由为bootstrap中已有的类创建所有新类。

Answer 3

要在移动视图中将两个图像保持在同一行，只需在两个div中的col-xs-6类旁边添加引导类col-md-6类，例如：

<div class="col-md-6 col-xs-6">

如何将两个图像居中使用Bootstrap3

3 个答案: