Bootstrap 网格对齐问题答案

【问题标题】：Problems with Bootstrap Grid AlignmentBootstrap 网格对齐问题
【发布时间】：2014-12-25 08:43:48
【问题描述】：

在此处查看页面和代码：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。任何帮助，将不胜感激。

谢谢！迈克

【问题讨论】：

谢谢大家。我还有其他几个问题。我无法让右侧的面板与图像标题处于同一水平（草帽中的自画像）。我尝试了 user3365721 但没有成功。它确实将它们放在同一行，但图像描述仍需要与大图像处于同一级别，而不是与图像标题内联。此外，由于某种原因，我的媒体对象没有以任何方式填充。我认为这应该是 .media 类的一部分。
仅供参考——我用最新的代码更新了网站链接。

标签： html css twitter-bootstrap grid

【解决方案1】：

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

【讨论】：

感谢您的解释！我明白我做错了什么。

【解决方案2】：

Div 到处都是，需要四处移动和更改，请参阅http://www.bootply.com/vYCgzsLueY 以正确布局，您的页面标题需要与其余部分和 col-md- 放在同一行中10 改为 col-md-12

【讨论】：

哇，看起来很棒。谢谢！我正在查看代码以确切了解您所做的事情。
为什么第 3 行似乎没有包含您更新的代码中的任何内容？
更新了上面的链接，看看是否能解决任何问题。删除了由于行类上的边距而将所有内容推入的行之一，并且对于需要添加一些内联 css 的图像最好将其移出到您自己的 css 文件中

【解决方案3】：

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

【讨论】：