Question

如果我希望列更多地位于内部，如何在列外侧的flex上设置填充 - 左侧和右侧？我正在使用Bootstrap，但我不想设置col-md-offset-1或类似的。

目前，如果我在padding: 0 50px;或.row上设置.flex，则列不会有相同的高度。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您可以使用margin代替padding，并且可以使用display: flex DEMO .col-md-4来获得相同高度的列，也许您想要在媒体查询DEMO

中

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

在外面填充弯曲

1 个答案: