Twitter bootstrap 引导布局-灵活列

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

<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>

冷水

它工作得很好，只是当我向列中添加一些内容时，该列并没有根据内容的宽度进行调整。我需要做什么来调整列的大小

---

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

使用更完整的示例更新了my fiddle，请尝试重新调整显示窗口的大小：

冷水

您需要添加更多标签，请在第一个div中尝试col-md-4 col-sm-6 col-xs-12，在接下来的两个div中尝试col-sm-6 col-xs-12。您应该可以看到响应这会更好一些，因为内容没有超出列的边界，但列本身并没有变大以适应内容的宽度。请记住经常重新调整窗口大小以查看引导的反应！太好了，一切正常。最有用的是使用row。很高兴它有用，记住，如果有助于解决您的问题，请接受这个答案。别忘了签出引导文档，它们非常容易阅读：

<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>