Bootstrap 3中的中心div如何排列n行？

Question

我想在bootstrap（每行是一個按鈕）中居中div ris-n行，當視圖很小時，div必須放置在rispect行（按鈕）下方。例如：button1 --->「hello world」，button2 --->「Hi there」。當我按下按鈕時，會出現中間的內容，當視圖很小時，內容必須在按鈕下方出現。我不想知道如何讓div出現/消失，我想知道如何在bootstrap中獲得位置。圖像闡明瞭這個問題。這裏我嘗試：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> 

，你可以從小提琴看到的「Hello World」沒有中心rispect 3行，但如果你改變窗口大小的DIV下按鈕1（同去，如果你與嘗試其他內容通過刪除「display：none」）。

Answer 1

根據OP要求的內容，您需要運行媒體查詢。

使用以下您可以執行以下操作。在div容器上使用margin: 0 auto;將使它們居中。使用text-align: center;將對齊a標記的按鈕。至於你的內容，你最終也會使用text-align: center;來集中這些內容。但是如果你需要它直接在盒子中居中，這有點棘手。

.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%); } 

：

要通過動態的，這意味着你的內容將決定它在哪裏，而不是使用填充，你可以做以下的中心對齊一個div中的內容，垂直和水平，並允許它

使用.uno您將塊設置爲position: relative;，該塊允許其中的position: absolute;項僅決定其相對於父容器的位置。因此，我將內容或文本設置爲左起50％，上起50％，然後將其縮小50％。 Here is a codepen of the example