html - Bootstrap 3 列不在桌面上水平显示

Question

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

JS Fiddle

我的 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 处设置了一个 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/