Bootstrap Center Div bleibt in langen Rechteck

Question

Ich habe bereits erstellt diese grundlegende Webseite, die eine Kopfzeile mit einem Bild und Worten hat, dann unter dieser Überschrift habe ich 3 Textblöcke, ich habe eine letzte Sache, die einen anderen Block hinzufügen von Text unter den 3 anderen. Dieser Block muss zentriert sein und sich bei langem Text nach unten statt nach seitwärts erstrecken.

Siehe Layoutbeispiel.

Here is a live example with lots of text.

Hier ist meine aktuellen Code

<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

Ersetzen mit

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

Mit

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

Answer 2

Okay, Ihr Beispiel tatsächlich funktioniert prima. Aber weil dein Inhalt nur ein einziges Wort ist, wird es außerhalb des Elternteils fortgesetzt. Um dies zu überprüfen, fügen Sie dieses CSS: word-wrap:break-word zu Ihrem h3 hinzu.

Ich schlage vor, eine Quelle von Blindtext wie Ipsum Lorem oder Bacon Ipsum in Zukunft

Answer 3

HTML (Sie sollten nicht Nest col- Klassen in einem anderen col- Klasse ohne neue row):

<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 (erlauben lange Wörter der Lage sein, auf die nächste Zeile zu brechen und wickeln):

h3 { 
    word-wrap: break-word; 
}