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>