Question

我正在尝试为我的仪表板应用程序实现引导程序布局。这是我在互联网上找到的代码，我正在调整。

<div class="container">
    <div class="col-md-4">
        <!--panel-->
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-6">col1</div><div class="col-md-6">col2</div>
                </div> 
            </div>
        </div>
    </div>
</div>

它很好用，除了当我向列中添加一些内容时，列不会调整到内容的宽度。我需要做些什么来使列自身调整大小？

由于

Answer 1

Bootstrap基于12列网格系统，您的父div正在说“将屏幕划分为3个框”（col-md-4）。您可以使用几个不同的选项替换它，以使div占用空间的剩余部分。我在此示例中选择了行，但您可以使用col-md-12或col-xs-12进行实验。

使用更完整的示例更新了我的小提琴，尝试重新调整显示窗口的大小：

jsFiddle

<div class="container">
    <div class="row">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-sm-6 col-xs-12">col1</div><div class="col-md-6">col2</div>
                    </div> 
                </div>
            </div>
    </div>
</div>

Bootstrap布局 - 灵活的列

1 个答案:

jsFiddle