Bootstrap中心Scafolding [英] Bootstrap Center Scafolding

问题描述

我会有两个部分，其中我使用bootstrap 3脚手架来设计风格。我有一个困难的时候，弄清楚我怎么可能有这些维持他们的列间距，而仍然以页面的中间为中心。例如现在是

 < content>< content> ---< space> --- 
  

我想要

  ---< space> ---< content>< content> ---< space> --- 
  

这是我拥有的。

 < div class =。container-fluidid =aboutContent> 
< div class =col-md-3> 
< img src =../ imgs / pic.jpgalt =Joe Brunettid =aboutPicture/> 
< / div> 
< div class =well col-md-4id =desc> 
< p>文字< p> 
< / div> 
< / div> 
  

解决方案

  div class =container> 
< div class =row> 
< div class =col-md-6 col-md-offset-3>< / div> 
< / div> 
< / div> 
  

抵消可用于将 div 但请记住，它只适用于偶数列。

< div class =col-md-8您甚至可以更改 break-col-md-offset-2< / div>

<通过替换

< div class =col-md-6 col-md-offset-3 < / div>

与

< div class =col-sm-6 col-sm-offset-3>< / div>

I'd have two "sections" in which I am using the bootstrap 3 scaffolding to style. I am having a hard time figuring out how I might have these maintain their column spacing while still be centered on the middle of the page. For example right now it is

<content><content>  ---<space>---

and i want

---<space>--- <content><content> ---<space>---

Here is what i've got.

<div class=".container-fluid" id="aboutContent">
    <div class="col-md-3">
        <img src="../imgs/pic.jpg" alt="Joe Brunett" id="aboutPicture"/>
    </div>
        <div class="well col-md-4" id="desc">   
            <p> text<p>
    </div>
</div>

解决方案

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3"></div>
    </div>
</div>

Offsets can be used to center a div but remember that it'll work only for even columns

<div class="col-md-8 col-md-offset-2"></div>

You can even change the break-point by replacing

<div class="col-md-6 col-md-offset-3"></div>

with

<div class="col-sm-6 col-sm-offset-3"></div>

这篇关于Bootstrap中心Scafolding的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！