Question

我尝试设置两列布局 - 左列是项目列表，第二列是第一列中项目的详细信息（单击项目和数据呈现，但那现在并不重要。）

我在设置布局时遇到困难 - 我可以让列进行，但是当我将列表添加到第一列时，它会在它下面呈现。我不确定为什么。

有人能指出我正确的方向吗？

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

我尝试删除父div（id =＆＃34; sidebar＆＃34;）并将该ID / width作为list-group div的一部分，但后来id =＆＃34; main＆＃34 ;在列表上方呈现。

所以，我很困惑。我错过了什么？

Answer 1

如果您使用col-md，当您的浏览器宽度低于＆lt;时，您的div的宽度为100％ 768px，这是移动优先css网格上的一种行为，因此请col-md更改col-xs以获得任何设备尺寸的结果

Bootstrap 3，在列中列出

1 个答案: