Question

我正在尝试使用Bootstrap 3.0创建一个居中的主内容div和右侧边栏。我尝试了以下代码来实现这一目标。

但是当我将浏览器调整到更短的宽度时，侧边栏会被推下，主要内容也会变得更宽。这种行为是否适用于bootstrap？我是否需要添加col-xs *以适应更短的宽度？

我想知道这是否是实现此设计的正确方法？

谢谢！

Answer 1

是的，这是默认行为。 Bootstrap 3在构建时考虑了“移动优先”，因此默认情况下布局是响应式的。您可以通过编写自定义网格而不使用Bootstrap列类来实现此效果，例如col-sm-6等。

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="content">
                Main Content
            </div>
            <div class="sidebar">
                Side bar
            </div>
        </div>
    </div>
</div>

然后写一些CSS。这只是一个示例，您应该根据自己的需要进行自定义。

.sidebar { width: 33.3%; }
.content { width: 66.6%; }

您可以在最小的屏幕尺寸上放置两列，但这不太可能是您所追求的。在小屏幕上，几乎没有空间可以将任何实质内容放入两列中。

<div class="col-xs-6">
    Main Content
</div>
<div class="col-xs-6">
    Side bar
</div>

Answer 2

你确实是正确的，这是bootstrap的一个功能:)你也正确使用.col-xs-*来实现你的计划设计。要添加到您尝试执行的操作（以防您还没有尝试过），您还可以组合网格类以适应不同的屏幕尺寸。

以下是一个例子：

<div class="row">
    <div class="col-md-8 col-sm-6 col-xs-12">
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
    </div>
</div>

古德勒克！：）

带有右侧边栏的Bootstrap 3.0中心主要内容

2 个答案: