如何使用 Bootstrap3 居中两个图像答案

【问题标题】：how to center two images use Bootstrap3如何使用 Bootstrap3 居中两个图像
【发布时间】：2014-05-04 03:31:33
【问题描述】：

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

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

【问题讨论】：

你想用它们做什么？让它们在同一行（一个在左边，另一个在右边）？

标签： html css image css-float

【解决方案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/

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：