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>

我得到了一个漂亮的小型jumbotron，左边是我的图像，右边是两个文本项目。但是，当我将div中的第二个段落标记放在第一个段落中以使两个段落正确对齐时，jumbotron会折叠到图像和文本段落上方的细线。

我尝试删除图片和所有内联格式。除了从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>

demo http://www.bootply.com/Vhw5rffz8D

Answer 2

在两个块对齐后添加clearfix div。在你的例子中，就在关闭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>

Bootstrap Jumbotron格式化问题

2 个答案: