Bootstrap 3 列未在桌面上水平显示

Question

我熟悉 bootstrap 并且它是响应式堆叠，但在这种情况下，我似乎可以在任何屏幕尺寸下进行堆叠。页面上的其他两列行没有这样做，所以我想知道是否有任何人可以看一看，看看我疲倦的眼睛遗漏了什么。

我的HTML:

<div class="row">
    <div class="col-md-12">

      <div class="col-md-6 pull-left" style="margin-bottom:40px;">
      <img src="http://placehold.it/1100x1591" style="max-width:400px;" alt=""/>
      </div>

            <div class="col-md-6 pull-right" style="font-weight:bold; margin-left:20px; margin-bottom:40px;">
            <div style="height: 2px; background-color: #9e1e22;">
  <span style="background-color: white; position: relative; top: -0.5em; color:#9e1e22; font-size:18px;">
    Cybersecurity&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  </span>
</div>
<div>
While information security and privacy are different, they are interdependent. For that reason, Navigate teams with select partner firms that specialize in cybersecurity to provide services such as highly technical security assessments, penetration testing, or application evaluations. These partnerships enable us to provide one integrated team for all your information protection, privacy and cybersecurity assessment needs.</div>
            </div>
    </div>
  </div>

Answer 1

我只是运行你的代码，我能够通过将你的第二个 div class="col-md-6" 更改为 col-md-5 来修复它，它没有更长的堆栈，直到您开始调整屏幕大小。

<div class="row">
    <div class="col-md-12">
        <div class="col-md-6 pull-left" style="margin-bottom: 40px;">
            <img src="http://placehold.it/1100x1591" style="max-width: 400px;" alt="" />
        </div>
        <div class="col-md-5 pull-right" style="font-weight: bold; margin-left: 20px; margin-bottom: 40px;">
            <div style="height: 2px; background-color: #9e1e22;">
                <span style="background-color: white; position: relative; top: -0.5em; color: #9e1e22; font-size: 18px;">
                    Cybersecurity&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </span>
            </div>
            <div>
                While information security and privacy are different, they are interdependent. For that reason, Navigate teams with select partner firms that specialize in cybersecurity to provide services such as highly technical security assessments, penetration testing, or application evaluations. These partnerships enable us to provide one integrated team for all your information protection, privacy and cybersecurity assessment needs.
            </div>
        </div>
    </div>
</div>

Answer 2

问题是您在 div 处设置了 margin-line，因此元素变得大于 50% 并堆叠。您可以使用

解决

  <div class="col-md-6 pull-right" style="font-weight: bold; padding-left: 20px; margin-bottom: 40px;">

您可以看到fiddle。

我还在你的 image 处添加了 div class="row" 和 img-responsive，但没有必要。

https://jsfiddle.net/2oyt71gL/3/

Bootstrap 3 列未在桌面上水平显示

Bootstrap 3 columns not displaying horizontally on desktop

css

twitter-bootstrap

two-columns