2

是否可以使用引導程序構建邊框佈局,該邊框佈局將右側和左側邊框的標籤居中,將底部保留在頁面底部並填充內容,並留出中間剩餘的所有空間?帶引導程序的邊框佈局

新來引導,但即使是與谷歌的幫助下,我只是想出了這一點:

div class="container"> 
<div class="row"> 
    <div class="col-xs-1"> 
     <div class="left-box"> 
      <div class="turn-left">left</div> 
     </div> 
    </div> 
    <div class="col-xs-10"> 
     <div class="row"> 
      <div class="col-xs-12"> 
       <div class="top-box">top</div> 
      </div> 
      <div class="col-xs-12"> 
       <div class="content-box">content</div> 
      </div> 
      <div class="col-xs-12"> 
       <div class="bottom-box">bottom</div> 
      </div> 
     </div> 
    </div> 
    <div class="col-xs-1"> 
     <div class="right-box"> 
      <div class="turn-right">right</div> 
     </div> 
    </div> 
</div> 

https://jsfiddle.net/fbtw6/352

結果不是很有說服力 - 我在做什麼錯?

回答

1

查看它this適合你。

<div class="container"> 
    <div class="page-header"> 
     <div class="row"> 
      <div class="col-xs-1"> 
       <div class="left-box"> 
        <div class="turn-left">left</div> 
       </div> 
      </div> 
      <div class="col-xs-10"> 
       <div class="row"> 
        <div class="col-xs-12"> 
         <div class="top-box">top</div> 
        </div> 
        <div class="col-xs-12"> 
         <div class="content-box">content</div> 
        </div> 
       </div> 
      </div> 
      <div class="col-xs-1"> 
       <div class="right-box"> 
        <div class="turn-right">right</div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<footer class="footer"> 
    <div class="container"> 
     <p>sticky footer</p> 
    </div> 
</footer> 

我用這個example進行組裝。

this還好嗎?

+0

部分,是的,非常感謝 - 但是我如何獲得左側和右側面板之間的頁腳?當我嘗試時,它再次上升。 還有左側和右側標籤的垂直對齊。 – Chris

+0

@Chris更新^ –

+0

是 - 哇,太好了 - 確切! 沒有引導上校,但沒關係,我要去那裏工作。 – Chris