Question

请在此处查看页面和代码：http://deadlydesigns.com/bootstrap/

您好，我是Bootstrap的新手。我一直在将Bootstrap实现为静态HTML页面，似乎无法弄清楚如何在右侧正确对齐购物车，流行艺术家和流行类型。这就是我做的。艺术名称和艺术家使用col-md-10类连续。我还没有结束该行，并在col-md-10类中为图像，描述和产品详细信息创建新行，其中图像的嵌套col-md-5和描述的嵌套col-md-7和产品细节。同样，我还没有结束这一行。然后我为类似产品部分添加了第三行。这是给了col-md-10类。然后我在一个col-md-2课堂上对购物车，流行艺术家和流行类型进行分类。我曾希望，由于行尚未结束，面板将“浮动”到右侧并正确对齐，但它们没有。它们实际上在应用col-md-2类之前正确对齐;但是，元素占用页面的整个宽度。应用col-md-2后，它将下降到页面的下半部分。在这些面板之后，我结束了所有三行。 Here is how the page is supposed to look。任何帮助，将不胜感激。

谢谢！麦克

Answer 1

将此div：<div class="col-md-2">向上移动一点。就这个div（第一个）：<div class="col-md-10">

Answer 2

Divs遍布整个地方，需要移动并更改，请参阅http://www.bootply.com/vYCgzsLueY，因为大部分布局正确，您的页面标题需要与其余部分和col-一起放入同一行md-10改为col-md-12

Answer 3

<div class="row">
    <div class="col-md-10">...code</div>
    <div class="row">            //You must not have a row inside an other row
        <div class="col-md-10">...code</div>
        <div class="row"> ...code</div> //You must not have a row inside an other row
    </div>
</div>

这应该是

<div class="row">
    <div class="col-md-10">...code</div>
    <div class="col-md-2">
        <div class="row">            
            <div class="col-md-10">...code</div>
            <div class="col-md-2"> ...code</div>
        </div>
    </div>
</div>

Bootstrap网格对齐问题

3 个答案: