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

的问题是，你设置一个margin-line你div所以元素比50％和堆栈更大。 您可以使用解决

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

你可以看到小提琴。

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

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

Answer 2

我只是跑你的代码，我能够改变你的第二个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>