html - Bootstrap Jumbotron 格式问题

Question

我正在尝试在超大屏幕中放置一张图片和两行文本。以下代码产生接近预期的结果:

        <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 中以使两个段落正确对齐时，超大屏幕会折叠成图像和文本段落上方的细线。

我已经尝试删除图像和所有内联格式。除了从 div 中删除第二个段落元素外，似乎没有任何效果。

如果您能提供任何帮助，我将不胜感激。

谢谢!

Answer 1

您缺少一个 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