为什么即使在全屏幕上也没有应用bootstrap col-lg-6？

Question

即使使用此代码，当浏览器最大化时，带有“some text”的第二个div也会下降到图像下方。将图像插入bootstrap列时会发生什么奇怪的事情吗？

<div class="row">        
    <div class="col-lg-6 " >                 
        <img src="images/goodtimes.jpg" alt=""/>
    </div>

    <div class="col-lg-6  ">                 
        some text
    </div>              
 </div>

Answer 1

$(SRCROOT)

Answer 2

原因是因为col-lg-6仅适用于大屏幕。它不一定是浏览器的全屏。同时应用col-sm-6可确保即使在较小的屏幕尺寸下也可应用样式。

如@hemnath mouli所述，其他尺寸的应用程序也可以使用。你的屏幕可能太小而无法触发这种风格。

没什么＆＃34;怪异的＆＃34;应该只是根据您的要求添加<img>标记。

Answer 3

确保该行位于容器类中。

<div class="container">
  <div class="row">        
    <div class="col-lg-6" >                 
      <img src="images/goodtimes.jpg" alt=""/>
    </div>
    <div class="col-lg-6">      
      <p>Hello World</p>           
    </div>              
  </div>
</div>

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

如果您尝试预览它，网格说明将提供一些见解。确保为元素指定的 col 类（即 col-lg-6 ）与您正在使用的像素宽度匹配。例如，使用 col-lg-6 ，屏幕尺寸必须至少 1170px 宽。