Wie zentriert man n-Zeilen im Bootstrap 3?

Question

Ich möchte eine div rispect n-Zeile im Bootstrap zentrieren (jede Zeile ist eine Schaltfläche) und wenn die Ansicht klein sein soll, muss das div unter der Risikozeile (Schaltfläche) positioniert werden. Also zum Beispiel: button1 ---> "Hallo Welt", button2 ---> "Hallo da". Wenn ich die Taste drücke, erscheint der Inhalt in der Mitte und wenn die Ansicht klein ist, muss der Inhalt unter der Taste erscheinen. Ich will nicht wissen, wie das div gemacht wurde/verschwinden, ich würde gerne wissen, wie ich die Position im Bootstrap bekommen kann. Das Bild verdeutlicht die Frage. Hier ist mein Versuch: https://jsfiddle.net/vo1npqdx/828/

<div class="container-fluid" style="border: 3px solid yellow;"> 
    <div class="row"> 
    <div class="col-sm-4 col-md-4 col-lg-3"> 
     <a class="btn btn-lg btn-default" role="button">Button1</a> 
    </div> 
    <div class="col-sm-8 col-md-8 col-lg-9" style="border: 3px solid red;"> 
     <div class="uno" style="border: 3px solid green;"> 
      <h3>Hello world</h3> 

      </div> 
    </div> 
    </div> 

    <div class="row"> 
    <div class="col-sm-4 col-md-4 col-lg-3"> 
     <a class="btn btn-lg btn-default" role="button">Button2</a> 
    </div> 
    <div class="col-sm-8 col-md-8 col-lg-9" style="border: 3px solid red; display: none;"> 
     <div class="uno" style="border: 3px solid green;"> 
      <h3>Hi there</h3> 

      </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-sm-4 col-md-4 col-lg-3"> 
     <a class="btn btn-lg btn-default" role="button">Button3</a> 
    </div> 
    <div class="col-sm-8 col-md-8 col-lg-9" style="border: 3px solid red; display: none;"> 
     <div class="uno" style="border: 3px solid green;"> 
      <h3>Hi there3</h3> 

      </div> 
    </div> 
    </div> 

wie man es von Geige sehen die „Hallo Welt“ ist nicht Zentrum rispect die 3 Reihe, aber wenn Sie die Fenstergröße die div unter button1 gehen ändern (das gleiche, wenn Sie versuchen, mit der anderer Inhalt durch Löschen "display: none").

Answer 1

Je nachdem, was OP verlangt, müssen Sie Medienabfragen ausführen.

Mit den folgenden können Sie Folgendes tun. Mit margin: 0 auto; auf den Div-Containern werden sie zentriert. Mit text-align: center; werden a gekennzeichnete Schaltflächen ausgerichtet. Was Ihre Inhalte anbelangt, verwenden Sie am Ende auch text-align: center;, um diese zu zentrieren. Aber wenn Sie es direkt in der Box zentriert benötigen, ist dies ein wenig komplizierter.

Zum Zentrieren den Inhalt innerhalb eines div align, sowohl vertikal als auch horizontal, und lassen Sie ihn durch dynamische, Ihre Inhalte bedeutet, wird darüber entscheiden, wo es ist, anstatt Polsterung verwenden, können Sie Folgendes tun können:

.uno { position: relative; width: 100%; /*or whatever width you want*/ background: grey; height: 300px;} 
.uno p { display: block; width: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } 

Mit .uno setzen Sie den Block auf position: relative;, der es erlaubt, und position: absolute; Elemente darin, um nur zu entscheiden, ob es relativ zum übergeordneten Container ist. Damit setze ich den Inhalt oder den Text auf 50% von links und 50% von oben und skaliere ihn dann um 50% dieser Summen zurück. Here is a codepen of the example