Question

我建了两个街区。第一个块（＆＃34;我们最好的报价＆＃34;）对我的移动设备没有响应，第二个块（＆＃34;我们的推荐和＃34;）是响应式的。第一个块跨越所有设备上的整行（！）。两个块的HTML代码都是正确的，因为它完全适合我的其余布局，我需要第一个块的容器和行。但是如何让第一个块响应，因为我认为它应该是我编码它的方式（？）？

小提琴...... Fiddle

HTML

<div class="well">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="add_box">
                        <h1 class="add_heading">Our best offers</h1>
                    </div>
                </div>
            </div>  
        </div>
    </div>

 <div class="col-sm-12">
            <div class="well recommend">
                <div class="add_box">
                    <h1 class="add_heading">Our recommendations</h1>
                </div>
            </div>
        </div>

CSS：

.well {
    position:relative;
    display:block;
    background-color:#6478E8;
    text-align:left;
    border-style:solid;
    border-radius:0;
    border-width:0 
}

Answer 1

将第二个盒子放在一行和一个容器中。例如。

<div class="container">
<div class="row">
    <div class="col-sm-12">
        <div class="well recommend">
            <div class="add_box">
                <h1 class="add_heading">Our recommendations</h1>
            </div>
        </div>
    </div>    
</div>

Answer 2

我无法看到你在提供的小提琴中提到的问题（我甚至无法看到Bootstrap的CSS，所以我猜你的小提琴并不是真的完整），不过你应该记住，根据Bootstrap的模型，所有columns都应该嵌套在row内，container应该嵌套在container-fluid（或<div class="container"> <div class="row"> <div class="col-xs-12"> <div class="well recommend"> <div class="add_box"> <h1 class="add_heading">Our recommendations</h1> </div> </div> </div> </div> </div>中如果你想让它占用所有屏幕的宽度）。请参阅containers的Bootstrap文档以及grid system。

这意味着您的第二个HTML块应更新为：

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="add_box">
                <h1 class="add_heading">Our best offers</h1>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="well recommend">
                <div class="add_box">
                    <h1 class="add_heading">Our recommendations</h1>
                </div>
            </div>
        </div>
    </div>
</div>

你当然可以为你的两个井使用相同的容器，最后是这样的：

col-sm-12

您会注意到，在我的示例中，我已将col-xs-12更新为col-sm-12。这是因为Bootsrap的逻辑是定义较小视口（xs）的列样式，然后根据需要覆盖较大视口的列样式。使用well可以得到您期望的结果，因为默认情况下您的div将占用可用的全部宽度，但是您的列大小未定义为额外的小视口，这有点不一致。

还要注意Bootstrap也有自己的well CSS类，因此我建议使用Bootstrap＆＃39; users或重命名自定义类，以避免与Bootstrap冲突＆＃ 39; CSS和未来遇到的新问题。

使盒子响应

2 个答案: