外側柔性填充

Question

如何設置列外側柔性填充 - 左側和右側，如果我希望列內側更多？我正在使用Bootstrap，但我不想設置col-md-offset-1或類似的。

目前如果我在.row或.flex上設置padding: 0 50px;，那麼列的高度將不會相同。

http://codepen.io/anon/pen/ZWPzOp

.row { 
 
    padding: 0 50px; 
 
    background-color: #333; 
 
} 
 
.flex { 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    /* Safari */ 
 
    justify-content: space-around; 
 
    -webkit-justify-content: space-around; 
 
    /* Safari 6.1+ */ 
 
} 
 
.col-md-4 {} 
 

 
.col-inside { 
 
    background-color: #aaa; 
 
    padding: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 

 
    <div class="row"> 
 
    <div class="flex"> 
 

 
     <div class="col-md-4"> 
 
     <div class="col-inside"> 
 
      <p>lorem asdf pdsfpds asdf pdsfpdsa fd asdf pdsfpdsa fda f asdf pdsfp asdf pdsfpdsa fd asdf pdsfpdsa fddsa fd asdf pdsfpdsa fdds</p> 
 
     </div> 
 
     </div> 
 

 

 
     <div class="col-md-4"> 
 
     <div class="col-inside"> 
 
      <p>lorem a asdf pdsfpdsa asdf pdsfpdsa fd asdf pdsfpdsa fdasdf pdsfpdsa fd fdsdf asdf pdsfpdsa fdpdsfp asdf pdsfpdsa fd asdf pdsfpdsa fd asdf pdsf asdf pdsfpdsa fd as asdf pdsfpdsa fd asdf pdsfpdsa fddf pdsfpdsa fd asdf pdsfpdsa fdpdsa fd asdf 
 
      pdsfpdsa fd asdf pdsfpdsa fddsa fds</p> 
 
     </div> 
 
     </div> 
 

 

 
     <div class="col-md-4"> 
 
     <div class="col-inside"> 
 
      <p>lorem asd asdf pdsfpdsa fd asdf pdsfpdsa fd asdf pdsfpdsa fd asdf pds asdf pdsfpdsa fdfpdsa asdf pdsfpdsa fd asdf p asdf pdsfpdsa fd asdf pdsfpdsa fd asdf pdsfpdsa fd asdf pdsfpdsa fd asdf pdsfpdsa fddsfpdsa fd asdf pdsfpdsa fdfdf pdsfpdsa fds</p> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 1

可以使用margin代替padding，並獲得列可以在.col-md-4DEMO使用display: flex相同的高度也可能要放置在媒體查詢DEMO

.col-md-4 { 
    margin: 0 20px; 
    display: flex; 
} 
.col-inside { 
    background-color: #aaa; 
    padding: 20px; 
}