如何在頁面中間居中引導col-md-4和col-md-5？

Question

我有兩個引導項目一個col-md-5和一個col-md-4。但我想將這兩個項目放在頁面中間，這兩個項目都是。現在我的col-md-4位於頁面的左側，而col-md-5位於頁面的中間。有沒有人有一個想法如何集中這兩個項目而不使用保證金。

<div class="col-md-4"> 
    <div class="klantcases"> 
    <h2>Company</h2> 
    <li><a href="#">Over ons</a></li> 
    <li><a href="#">Kernwaarden</a></li> 
    <li><a href="#">Missie en visie</a></li> 
    <li><a href="#">Nieuws</a></li> 
    <li><a href="#">Blog</a></li> 
     <li><a href="#">Development Blog</a></li> 
     <li><a href="#">Marketing Blog</a></li> 
    <li><a href="#">Development</a></li> 
    <li><a href="#">Marketing</a></li> 
    <li><a href="#">Werken bij ons></li> 
</div> 

<div class="col-md-5"> 
<div class="blogpreview"> 
    <img src="img/kan.png" alt="kan" /><h1>The latest from our</br> 
     DEVELOPMENT BLOG</h1> 

    <img src="img/bloglaptop.jpg" alt="bloglaptopcode" /> 

    <div class="bloginfo"><h2>Woensdag 15 april 2015 - 12:05</h2></br></br> 
     <h1>CSS styleable, vector based icons on every device (even IE8)</h1> 
     <p>Icons have always been an important part of an interface. They allow the user to recognize certain actions with only a glance. In this blog, we will look for a complete and closing solution to render css-styleable icons that are supported by older browsers while still looking great on modern retina displays.</p> 

     <a href="#"><h3 class="leesmeer">LEES MEER</h3></a> 

     </div> 


    <div class="meer"> 
     <h2>Maandag 13 april 2015 - 13:19</h2> 
     <h1>Inline video on the iPhone</h2> 
      <p>video has come a long way. We went from nitrate film, tape and VHS to digital video. From black and white tubes to full color 4k flatscreen televisions. And from static desktop environments to video more and more being something that you take with you by watching it on your mobile device. </p> 
      <a href="#"><h3 class="leesmeer">LEES MEER</h3></a> 
    </div> 

     <div class="meer"> 
     <h2>Maandag 30 maart 2015 - 18:30</h2> 
     <h1>Video in email: today or tomorrow?</h2> 
      <p>You can and should be using video in email today! Video in email often is "the" missing link in business to consumer email communication. We did a lot of technical research and development and want to share some of the results with you today. </p> 
      <a href="#"><h3 class="leesmeer">LEES MEER</h3></a> 
    </div> 



<img src="img/pfoon.png" alt="pfoon" /> <h1>The latest from our</br> 
     MARKETING BLOG</h1> 

    <img src="img/iphone.jpg" alt="iphonehand" /> 

    <div class="bloginfo2"><h2>Woensdag 15 april 2015 - 12:05</h2></br></br> 
     <h1>CSS styleable, vector based icons on every device (even IE8)</h1> 
     <p>Icons have always been an important part of an interface. They allow the user to recognize certain actions with only a glance. In this blog, we will look for a complete and closing solution to render css-styleable icons that are supported by older browsers while still looking great on modern retina displays.</p> 

     <a href="#"><h3 class="leesmeer">LEES MEER</h3></a> 

     </div> 

     <div class="meer"> 
     <h2>Maandag 13 april 2015 - 13:19</h2> 
     <h1>Inline video on the iPhone</h2> 
      <p>video has come a long way. We went from nitrate film, tape and VHS to digital video. From black and white tubes to full color 4k flatscreen televisions. And from static desktop environments to video more and more being something that you take with you by watching it on your mobile device. </p> 
      <a href="#"><h3 class="leesmeer">LEES MEER</h3></a> 
    </div> 

     <div class="meer"> 
     <h2>Maandag 30 maart 2015 - 18:30</h2> 
     <h1>Video in email: today or tomorrow?</h2> 
      <p>You can and should be using video in email today! Video in email often is "the" missing link in business to consumer email communication. We did a lot of technical research and development and want to share some of the results with you today. </p> 
      <a href="#"><h3 class="leesmeer">LEES MEER</h3></a> 
    </div> 





</div> 

Answer 1

可以在引導偏移列。 See Docs。 通過使用諸如col-md-offset-4這樣的類，您可以在整個頁面上推動您的列。

在你的情況下，你需要調整你的列來構成一個總數，例如， col-md-4和col-md-6，然後添加col-md-offset-1以將第一列偏移1列。

Answer 2

由於Bootstrap默認網格有12列，因此無法將9列網格與默認Bootstrap偏移集中在一起。因此，所有你需要做的是建立偏移一個自定義的1.5（其中留有餘量將等於1.5/12 * 100％= 12.5％），並將其應用到.col-md-4容器：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4 col-md-offset-custom">...</div> 
     <div class="col-md-5">...</div> 
    </div> 
    <!--/.row --> 
</div> 
<!--/.container --> 


@media(min-width: 992px && max-width: 1199px) { 
    .col-md-offset-custom { 
     margin-left: 12.5%; 
    } 
} 

的jsfiddle：http://jsfiddle.net/Lq06L4hb/2/