將內容放置在引導程序中的佈局中

Question

我正在使用引導程序3.我想將內容（包括3個圖像）包含在紅色框架寬度的中間。

https://codepen.io/anon/pen/WZyrYq

HTML：

<div class="container"> 
    <div class="row me"> 
     <div class="col-lg-3 many-cols-centered"> 
      <img src="http://via.placeholder.com/300"> 
     </div> 
     <div class="col-lg-3 many-cols-centered"> 
      <img src="http://via.placeholder.com/300"> 
     </div> 
     <div class="col-lg-3 many-cols-centered"> 
      <img src="http://via.placeholder.com/300"> 
     </div> 
    </div> 
</div> 

CSS：

.container{ 
    border:solid 1px red;padding:0;box-sizing:border-box 
} 
.me{text-align:center} 
.many-cols-centered { 
    float: none; 
    display: inline-block;padding:0 
} 

Answer 1

你的意思是這樣的？

如果是這樣，你可以做這樣的事情：

<div class="container"> 
<div class="row me"> 
    <h>Hello my friend</h> 
    <div "col-lg-12"> 
    <div class="col-lg-3 many-cols-centered"> 
    <img src="http://via.placeholder.com/300"> 
    </div> 

    <div class="col-lg-3 many-cols-centered"> 
     <img src="http://via.placeholder.com/300"> 
    </div> 

    <div class="col-lg-3 many-cols-centered"> 
     <img src="http://via.placeholder.com/300"> 
    </div> 
    </div> 
</div>