Question

我正在玩twitter 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>

现在右手边的图像完全吻合（因为我已经指定了高度和宽度，但如果我把任何文字放在井外面。同样，在左侧，{{1}之间的文字}标签出现在井外，如果我放入没有任何h1标签的普通文本，则文本在井内。我尝试使用header但没有变化。有任何帮助吗？

Answer 1

DEMO：http://jsbin.com/iKENaGU/1/edit

井是div，部分，文章，旁边（或其他块级元素），但是你不能把h1放在p里面，所以井不是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>

Twitter Bootstrap - p class = well无法包含<h1> content </h1>

1 个答案:

DEMO：http://jsbin.com/iKENaGU/1/edit