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