Question

我在网络视图中有以下内容

http://shahnashok.com/stackoverflow/b-webView.png

我想在响应式视图中使用以下结构

http://shahnashok.com/stackoverflow/b-responsiveView.png

如何使用单一结构在两个视图中实现这一点

<div class="left">
    <div class="row">1</div>
    <div class="row">2</div>
    <div class="row">3</div>
</div>
<div class="right">
    <div class="row">4</div>
</div>

CSS

.left{
    width: 30%;
    float: left;
}
.right{
    width: 70%;
    float: right;
}

@media (min-width: 720px)
{
    .left, .right{width: auto; float: none;}
}

Answer 1

单独的Bootstrap将无法为您提供完美的对齐。您的CSS看起来不错，但您需要更新HTML。你可以在这里查看一个小提琴：http://jsfiddle.net/m0nk3y/384upoer/1/。这就是我组织HTML的方式：

<div class="container">
    <div class="row">
        <div class="blue col-xs-4"></div>
        <div class="green col-xs-8"></div>
        <div class="yellow col-xs-4"></div>
        <div class="red col-xs-4"></div>
    </div>
</div>

我希望有所帮助。祝你好运！

响应视图的Bootstrap更改结构

1 个答案: