很好地使BootStrap居中

Question

我试图将一个Bootstrap Well集中在一个div中的"Resource Booker"中,以便它与它下面的两个框正确对齐.我曾尝试添加填充,但它在井内添加了填充.我在下面提供了一张图片和我的代码.

页面截图

      <div class="col-sm-8 text-left"> 
            <br>
            <br>
     <div class="well well-lg" style="background-color:rgb(0,50,0); color:white;"><h1>   Resource Booker </h1> </div> 
            <br>
            <br>           
       <div class="row">     
      <div class="column"> 
        <div class="card" id="hi" style="width:400px; height:300px;">
          <p><i class="fa fa-user"></i></p>
          <h1>Book</h1>
          <p>Book A Room</p>
          <p>  <span class="glyphicon glyphicon-book" style="font-size:150px;"></span></p>
        </div>
      </div>
    <center>
      <div class="column">
    <br>
      </div> 
      <div class="column">
   <div class="card" id="bye" style="width:400px; height:300px;>
          <p><i class="fa fa-coffee"></i></p>                               
          <h1>Calender</h1>
          <p>Check Availability</p>
          <p>  <span class="glyphicon glyphicon-calendar" style="font-size:150px;"></span></p>
        </div>
      </div>        
    </div>
        </div>
          </center>       
    </div>

井下卡片的CSS是:

/*并排浮动四列*/

.column {
  float:left;
  width: 27%;

  padding: 0px 50px 0px 90px;
}

.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 10px;
  }
}

/* Style the counter cards */

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #444;
  color: white;

}

.fa {font-size:200px;

Answer 1

尝试添加container包裹的类div.您也可以添加margin-left相同的内容.此外,请添加项目的codepen,以便我们的移动用户可以使用该解决方案.