Question

我想知道使用Bootstrap 3轻松实现这种布局。

Bootstrap 3 Layout desired

Answer 1

您可以使用 bootstrap 3 轻松实现该布局，您只需按正确顺序排列列。 橙色〜红色块我认为它是侧边栏，而其他两个块具有相同的宽度（似乎绑定到同一个容器），我认为你有你的内容

因此，将侧边栏 块放在引导网格中具有所需宽度的容器中，如col-md-4和内容块在容器中说col-md-8;添加到这两个容器col-xs-12类（将在768px和bellow上添加100％宽度），我们需要它，因为我们将使用pull-left/right（浮点规则）类来交换它们。 / p>
查看 demo ，然后查看使用的标记/ css

标记：

<div class="container"> <div class='row cf'> <div class='col-sm-4 col-xs-12 pull-right'> <div class='orange'>One good lookin sidebar</div> </div> <div class='col-sm-8 col-xs-12 pull-left'> <div class='content-entry orchid'> Some content here </div> <div class='content-entry cyan'> And some other content here </div> </div> </div> </div>

和css：

.orange{ background: orange; } .orchid{ background: orchid; } .cyan{ background: cyan; }

**注意：如果您希望侧边栏将其高度扩展到其他2个块组合的高度，这是一个不同的故事，但这应该让您开始。

更新2

好的，因为你在移动设备上布局有点棘手，我猜你最安全的选择是将侧边栏 absolute定位在移动设备上（ bellow和767px ），将其切换到静态位置，使em陷入自然流动。还有一些其他的方法，比如flexbox，或者可能是一些花哨的表格技巧，但这个方法应该让你去。

查看 demo ，以及更改后的标记/ css：

<div class="container"> <div class='row content-wrapper'> <div class='col-sm-8 col-xs-12'> <div class='content-entry orchid'> Some content here </div> </div> <div class='col-sm-4 col-xs-12 sidebar-wrapper'> <div class='orange'>One good lookin sidebar</div> </div> <div class='col-sm-8 col-xs-12'> <div class='content-entry cyan'> And some other content here </div> </div> </div> </div> .orange{ background: orange; } .orchid{ background: orchid; } .cyan{ background: cyan; } /*added rules*/ .content-wrapper{ position: relative; } .sidebar-wrapper{ position: absolute; top: 0; right: 0; } @media all and (max-width: 767px){ .sidebar-wrapper{ position: static; } }

Answer 2

看看here，我认为.col-md-8和.col-md-4课程对你来说很有意思。

Answer 3

由于堆栈溢出不会执行任何项目，我向您发布简单易行的步骤

Bootstrap使用媒体查询示例

@media screen and (max-width: 500px) {
                div {
                    width: 80%
                }
          }

如果屏幕低于500px div宽度为80%

，则上述查询有效

试试这个例子

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: lightgreen;
}

@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}
</style>
</head>
<body>

<p>Resize the browserwindow. When the width of this document is less than 300 pixels, the background-color is "lightblue", otherwise it is "lightgreen".</p>

</body>
</html>

以上示例将显示屏幕尺寸低于600px页面颜色将从lightgreen更改为lightblue

Answer 4

<body class="container">
     <div class="row">
        <div class="col-sm-6 col-xs-12">orange</div>
        <div class="col-sm-6 col-xs-12">
           <div class="row">violet row</div>
           <div class="row">light blue</div>
        </div>
     </div>
</body>

我在手机上使用了xs-12。请在下次发布您的示例代码。

Answer 5

感谢您的所有答案。

以下是我在所有答案的帮助下所做的事情：

    <div class="container">
        <div class="row">
            <div class="col-sm-8 bg-info">
                <h4>Content 1</h4>
            </div>
            <div class="col-sm-4 bg-warning pull-right">
                <h4>Sidebar</h4>
            </div>
            <div class="col-sm-8 bg-success pull-left">
                <h4>Content 2</h4>
            </div>
        </div>
    </div>

Answer 6

<div class="row">
    <div class="col-xs-12 col-md-8" style="background-color:purple; color:#fff">Contents box 1</div>
    <div class="col-xs-12 col-md-4" style="background-color:red; color:#fff">Sidebar</div>
    <div class="col-xs-12 col-md-8" style="background-color:blue; color:#fff">Contents box 2</div>    
</div>

Answer 7

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-xs-12 col-md-8" style="background-color:purple; color:#fff">Contents box 1</div>
    <div class="col-xs-12 col-md-4" style="background-color:red; color:#fff">Sidebar</div>
    <div class="col-xs-12 col-md-8" style="background-color:blue; color:#fff">Contents box 2</div>    
</div>

移动设备上的Bootstrap 3列重新排序

7 个答案: