Bootstrap Jumbotron格式问题

我试图在jumbotron中放置图像和两行文本。下面的代码产生接近期望的结果：Bootstrap Jumbotron格式问题

 <div class="jumbotron" id="jumbo"> 
      <div class="col-md-1"> 
       <img src="images/ps_logo.png" style="width: 220px; height: 140px"> 
      </div> 
      <div class="col-md-9 col-md-offset-2"> 
       <p style="font-size:380%; font-weight: bold; padding-top:10px">Picante Solutions, LLC</p> 
      </div> 
      <p style="font-style:italic; font-weight: bold; font-size:150%">Professional Technology Services for Business and Home</p> 
     </div>

我与我的左边像一个可爱的小的超大屏幕和右侧的两个文本项目。但是，当我将第二个段落标记放在第一个div的第一个段落以使两个段落正确排列时，jumbotron折叠成图像和文本段落上方的细线。

我试过删除图像和所有的内联格式。除了从div内删除第二段元素外，没有任何东西可以工作。

我希望你能提供任何帮助。

谢谢！

来源

2017-04-14 Kevin

你缺少一个container元素：

<div class="jumbotron" id="jumbo"> 
    <div class="container"> 
    <div class="col-md-1"> 
     <img src="images/ps_logo.png" style="width: 220px; height: 140px"> 
    </div> 
    <div class="col-md-9 col-md-offset-2"> 
     <p style="font-size:380%; font-weight: bold; padding-top:10px">Picante Solutions, LLC</p> 
     <p style="font-style:italic; font-weight: bold; font-size:150%">Professional Technology Services for Business and Home</p> 
    </div> 
    </div> 
</div>

演示http://www.bootply.com/Vhw5rffz8D

来源

2017-04-14 22:48:04

谢谢！这工作完美。 – Kevin

添加clearfix格后两个街区神韵：。在你的例子中，在关闭Jumbotron的div之前。这里是例子：

<div class="jumbotron" id="jumbo"> 
<div class="col-md-1"> 
    <img src="images/ps_logo.png" style="width: 220px; height: 140px"> 
</div> 
<div class="col-md-9 col-md-offset-2"> 
    <p style="font-size:380%; font-weight: bold; padding-top:10px">Picante Solutions, LLC</p> 
<p style="font-style:italic; font-weight: bold; font-size:150%">Professional Technology Services for Business and Home</p> 
</div> 
    <div class="clearfix"></div> 
</div>

来源

2017-04-14 22:48:58

Bootstrap Jumbotron格式问题

回答

相关问题