Bootstrap 3，列中列出

Question

I'm trying to set up a two-column layout - The left column is a list of items and the 2nd column is the details about an item in the first column (click on the item and the data renders, but that's not important right now). 我正在尝试建立一个两列布局-左列是项目列表，第二列是有关第一列中项目的详细信息（单击该项目并渲染数据，但这并不重要）现在）。

I'm getting stuck setting up the layout - I can get the columns going, but when I add the list into the first column, it's rendering below it. 我在设置布局时遇到了麻烦-我可以让列继续前进，但是当我将列表添加到第一列时，它会在其下方呈现。 And I'm not sure why. 我不确定为什么。

Can someone point me in the right direction? 有人可以指出我正确的方向吗？

<body>
    <div id="content">
        <div class="row">
            <div id="sidebar" class="col-md-4">
                <div class="list-group">
                    <a class="list-group-item">Item Here</a>
                    <a class="list-group-item">Item Here</a>
                </div>
            </div>
            <div id="main" class="col-md-8">
                Other Stuff Here
            </div>
        </div>
    </div>
</body>

I've tried removing the parent div (id="sidebar") and making that ID/width part of the list-group div, but then id="main" renders above the list. 我试过删除父div（id =“ sidebar”）并使该ID /宽度成为列表组div的一部分，但是id =“ main”呈现在列表上方。

So, I'm confused. 所以，我很困惑。 What am I missing? 我想念什么？

Answer 1

如果您使用col-md，则当您的浏览器宽度小于768px时，div的宽度为100％，这是在移动设备第一个CSS网格上的行为，因此请通过col-xs更改col-md以获取针对任何设备尺寸的结果

Bootstrap 3，列中列出

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-06-05 14:39:24

Bootstrap 3，列中列出

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-06-05 14:39:24

解决方案1
0 已采纳 2014-06-05 14:39:24