Question

首先要说的是，我是网络编程的新手，所以我可能会有一个简单的问题。

问题是我试图使用以下基于众所周知的Bootstrap3网格系统的结构将2个元素放在另一个旁边：

<div class="container presentation">
  <div class="row">

    <div class="col-lg-6 stitched">
    </div>

    <div class="col-lg-6 stitched">
    </div>

  </div>
</div>

你看到的拼接类是在互联网上找到的一种CSS效果，它使元素看起来像真的被缝合了。 CSS代码如下：

.stitched{
 padding: 20px;
 margin: 10px;
 background: #ff0030;
 color: #fff;
 /*font-size: 21px;*/
 /*font-weight: bold;*/
 line-height: 1.3em;
 border: 2px dashed #fff;
 border-radius: 10px;
 box-shadow: 0 0 0 4px #ff0030, 2px 1px 3px 4px rgba(10, 10, 0, 0.5);
 text-shadow: -1px -1px #aa3030;
 /*font-weight: normal;*/
}

所以问题是这个。当我看到页面时，这两个元素不是一个接一个，实际上，第二个div在第一个下面，并且没有办法显示内联的两个div。只有当我从CSS中删除 margin 属性时，我设法将它们显示在另一个旁边，但是它们看起来很糟糕，因为它们重叠。有谁知道为什么会这样？当然，任何人都知道如何在不使它们重叠的情况下显示内联元素？

感谢。（如果有必要，我会提供照片）

Answer 1

bootstrap中的列对边距和边框大小有特定要求。如果您将拼接的div放在列div中，那么它应该可以正常工作。像这样：（demo）

<div class="container presentation">
  <div class="row">

    <div class="col-lg-6">
        <div class='stitched'>
        </div>
    </div>

    <div class="col-lg-6">
        <div class='stitched'>
        </div>
    </div>

  </div>
</div>

Answer 2

我还没有使用过bootstrap 3，但假设它的工作原理与bootstrap 2相同，那么网格布局最多只能包含12列。你在这里使用6和6，最多12个，这很棒。但是，您正在添加额外的边距，这会使您的布局超过12列阈值，从而导致div下降并且网格系统中断。

有关网格系统的信息，请参见此处。这很好地解释了：

http://getbootstrap.com/css/#grid

要解决您的问题，您需要在列div中包含拼接的div，并避免添加额外的边距，除非您通过在模板中的其他位置删除它们来进行补偿。

Answer 3

我认为您的问题是您使用的.col-lg-6仅适用于＆gt; = 1200px的分辨率。通过良好实践，如果您只想在cols中定义一个类，请使用.col-sm-x，它适用于所有显示＆gt; = 768px。为了更加确定，您可以将您的班级定义为.col-cs-6 .col-sm-6 .col-md-6 .col-lg-6，以确保它在所有设备上都是相同的，如果这就是您想要的。

我得到了它的工作。在这里查看我的小提琴http://jsfiddle.net/pdBDM/

请参阅HERE以获得比我更好的解释。

Bootstrap 3网格显示问题

3 个答案: