0

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

问题是我正在尝试使用以下基于众所周知的 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属性时，我才能将两者并排显示，但是它们看起来很糟糕，因为它们重叠。有谁明白为什么会这样？当然，任何人都知道如何在不重叠的情况下内联显示两个元素？

谢谢。（如有需要我会提供图片）

4

3 回答 3

2

bootstrap 中的列对边距和边框大小有特定要求。如果您将缝合div的 s 放在列divs 内，那么它应该可以工作。像这样：（演示）

<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>
于 2013-10-29T16:35:57.740 回答
0

我还没有使用过 bootstrap 3，但假设它的工作原理与 bootstrap 2 相同，网格布局最多只能包含 12 列。您在这里使用 6 和 6，它们加起来是 12，这很棒。但是，您随后添加了额外的边距，这会将您的布局推到 12 列阈值之上，从而导致 div 低于并且网格系统中断。

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

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

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

于 2013-10-29T16:33:02.037 回答
0

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

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

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

于 2013-10-29T16:41:24.657 回答