html - Twitter Bootstrap - p class = well 无法包含

Question

我在玩推特 Bootstrap 。我遇到了 template我真的很喜欢，我正在用它做一个小元素。我对网格布局做了一些小改动，使其具有 2 列结构，其代码如下 -

<div id="page-content-wrapper">
        <div class="content-header">
          <h1>
            <a id="menu-toggle" href="#" class="btn btn-default"><i class="icon-reorder"></i></a>
            Family Tree
          </h1>
        </div>
        <!-- Keep all page content within the page-content inset div! -->
        <div class="page-content inset">
          <div class="row">
            <div class="col-md-12">
              <p class="lead">For We are now so big, we need computers to remember stuff.</p>
            </div>
            <div class="col-md-3">
              <p class="well"><img src = "bootstrap/img/napa.jpg" height = "500" width = "346"> 

              </p>
            </div>
            <div class="col-md-9">
              <p class="well"><h1>Nanna </h1></p>
            </div>
          </div>
        </div>
      </div>

现在右侧的图像非常适合(因为我已经指定了高度和宽度，但是如果我放置任何文本，它就会出现在井的外面。类似地，在左侧，h1 之间的文本 标 checkout 现在井外，如果我输入没有任何 header 标签的普通文本，则文本在井内。我尝试使用 p class = "well-lg" 但没有任何变化。有什么帮助吗？

Answer 1

演示:http://jsbin.com/iKENaGU/1/edit

Wells 是 div、sections、articles、aside(或其他 block 级元素)，但不能将 h1 放在 p 中，因此 well 不是 p.well。查看 GetBootstrap.com 以获取有关 Bootstrap 特定内容的说明，但也可以查看 html5 基础知识。要获得响应式图像，请在 img 标签上添加“img-responsive”。 .well-lg 只是一个填充调整。行和列的包装器是一个.container。

  <div class="container">
      <div class="row">
        <div class="col-md-12">
          <p class="lead">For We are now so big, we need computers to remember stuff.</p>
        </div>
        <div class="col-md-3">
          <div class="well"><img src="http://placehold.it/500x500/B7AF90/FFFFFF&text=image+1" class="img-responsive" /> 

          </div>
        </div>
        <div class="col-md-9">
          <div class="well">
            <h1>Nanna </h1>
          </div>
        </div>
      </div>
    </div>
  </div>