Bootstrap 中心 div 留在长矩形中

Question

我已经创建了这个基本网页，其中有一个 header 带有图像和文字，然后在下面 header 我有 3 个文本块，我还有最后一件事要添加是其他 3 个下方的另一个文本块。当文本较长时，此块需要居中并向下延伸，而不是横向延伸。

参见布局示例。

Here is a live example with lots of text.

这是我当前的代码

<div class="container-fluid">
        <div class="row text-left">
            <p>Having trouble viewing this email? <a href="<%=HttpContext.Current.Request.Url.AbsoluteUri %>">View in browser</a></p>
        </div>
    </div>

    <div class="container-fluid page-header">
        <div class="row text-center">
            <div class="col-xs-12">
                <img src="http://ssiclouddev.azurewebsites.net/Content/Images/Icons/favicon-96x96.png" />
                <h1>Susquehanna Software Inc.</h1>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row text-center">
            <div class="col-xs-12 col-md-4">
                <h3>From:  <% =Request.QueryString["From"] %></h3>
            </div>
            <div class="col-xs-12 col-md-4">
                <h3>Email: <% =Request.QueryString["FromEmail"] %></h3>
            </div>
            <div class="col-xs-12 col-md-4">
                <h3>Subject: <% =Request.QueryString["FromSubject"] %></h3>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row text-center">
            <div class="col-xs-12">
                <div class="col-xs-6">
                    <h3><% =Request.QueryString["Content"] %></h3>
                </div>
            </div>

        </div>
    </div>

Answer 1

好的，您的示例实际上运行良好。但是因为您的内容只是一个巨大的词，所以它会在父项之外继续存在。要检查这一点，请将此 CSS: word-wrap:break-word 添加到您的 h3.

我建议以后使用 Ipsum Lorem or Bacon Ipsum 等虚拟文本来源

Answer 2

替换

 <div class="col-xs-12">
      <div class="col-xs-6">
          <h3><% =Request.QueryString["Content"] %></h3>
      </div>
 </div>

有

<div class="col-xs-6 col-xs-offset-3">  
        <h3><% =Request.QueryString["Content"] %></h3>
</div>

Answer 3

HTML（你不应该在没有新的 row 的情况下将 col- class 嵌套在另一个 col- class 中：

<div class="container-fluid">
  <div class="row text-center">
    <div class="col-xs-6 col-xs-offset-3">
      <h3><% =Request.QueryString["Content"] %></h3>
    </div>
  </div>
</div>

CSS（允许长词能够换行到下一行）：

h3 {
  word-wrap: break-word;
}

Bootstrap 中心 div 留在长矩形中

Bootstrap center div stays in long rectangle

html

css

user-experience

twitter-bootstrap