Question

我的Boxes onces有问题我调整了我的网页（浏览器）我不知道如何使用它，我使用“col-sm-3”

<div class="col-md-12">
    <div class="w-section inverse">
         <h3 class="section-title">User's Outfits</h3> 
        <div class="row">
            <div class="col-md-3">
                <div class="box">
                    <div id="boxpic">
                        <img src="http://apinchofglitzandglam.files.wordpress.com/2014/03/dsc_0653.jpg?w=560&h=822" />
                    </div>
                    <div id="title" style="text-align:center;">Winter's Mist</div>
                    <p style="font-family:comic sans MS;width:250px;height:30px;"></p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box">
                    <div id="boxpic">
                        <img src="http://apinchofglitzandglam.files.wordpress.com/2014/03/dsc_0653.jpg?w=560&h=822" />
                    </div>
                    <div id="title" style="text-align:center;">Winter's Mist</div>
                    <p style="font-family:comic sans MS;width:250px;height:30px;"></p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box">
                    <div id="boxpic">
                        <img src="http://apinchofglitzandglam.files.wordpress.com/2014/03/dsc_0653.jpg?w=560&h=822" />
                    </div>
                    <div id="title" style="text-align:center;">Winter's Mist</div>
                    <p style="font-family:comic sans MS;width:250px;height:30px;"></p>
                </div>
            </div>
        </div>
    </div>
</div>

以下是图片 - ＆gt; http://justpaste.it/STacKovErFloW

Answer 1

看起来您的图片没有调整大小。在你的css风格中使用它

.boxpic img {
   width:100%;
   height:auto;
 }

Answer 2

将以下类添加到图像中：

img-responsive

以下是一个例子：

的 DEMO JSFiddle

此外，BootStrap的工作原理是自下而上......这意味着，如果您声明列是中等的，那么中型和大型列都将与您声明的列保持一致，即：

col-md-3 therefore implies col-lg-3

然而，如果您声明一个额外的小列大小，那么它与每个可能的列保持一致，即：

col-xs-3 therefore implies col-sm-3, col-md-3, and col-lg-3

因此，如果您希望网页上的某些内容能够保持所有设备的一致性，那么您可以声明最小的列大小（xs）并使用它来处理所有小型，中型和大型屏幕尺寸。下面是一个例子：

的 DEMO JSFiddle

自举箱不合适

2 个答案:

的 DEMO JSFiddle

的 DEMO JSFiddle