Bootstrap Row 不会居中列

Question

我正在尝试使用 3 列布局，它在较小的屏幕上变成 2 或 1 列。我正在使用 React 在一行中填充许多列，但所有组合起来都是这样的：

    <Grid className="property-grid">
       <Row className="property-row">
          <Col xs={12} md={4} className="property-thumbnail" key={this.props.key}>
              <div className="thumbnail">
                <Image src={this.props.img} responsive className="property-pic" />
              </div>
              <div className="property-padded">
                <p>some description</p>
              </div>
          </Col>
          .
          .
          /* other columns */
          .
          .
       </Row>
    </Grid>

这是它的外观

.properties-grid {
  width: 100%;
  margin: 0 auto;
  background-color: yellow;
}
.properties-row {
  flex-wrap: wrap;
  display: inline-flex;
  background-color: red;
  margin: 2em auto;
  width: 100%;
}

.property-thumbnail {
  margin: 2em auto;
  background-color: green;
  display: table-cell;
  max-width: 450px;
}

我希望最后一个奇数列位于左侧，因此我尝试使用display: inline-block。但是后来发生了这种情况

如何使第一行看起来像第一张图片（居中的列和它们之间的一些间隙），同时确保最后一行保持在左侧？

Answer 1

只需将 margin:2em auto; 从您的班级中删除 .property-thumbnail

如果您的property-row 中的元素少于3 个，它会将您在班级.property-thumbnail 中的内容推到中心

const Grid = ReactBootstrap.Grid;
const Row = ReactBootstrap.Row;
const Col = ReactBootstrap.Col;
const Panel = ReactBootstrap.Panel;
const ButtonToolbar = ReactBootstrap.ButtonToolbar;
const Button = ReactBootstrap.Button;
const Form = ReactBootstrap.Form;
const Image = ReactBootstrap.Image;
const Test = React.createClass({
  render() {
    return ( <
      Grid className = "property-grid" >
      <
      Row className = "property-row" >
      <
      Col xs = {
        12
      }
      md = {
        4
      }
      className = "property-thumbnail"
      key = {
        this.props.key
      } >
      <
      div className = "thumbnail" >
      <
      Image src = "https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg"
      responsive className = "property-pic" / >
      <
      /div> <
      div className = "property-padded" >
      <
      p > some description < /p> <
      /div> <
      /Col> <
      Col xs = {
        12
      }
      md = {
        4
      }
      className = "property-thumbnail"
      key = {
        this.props.key
      } >
      <
      div className = "thumbnail" >
      <
      Image src = "https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg"
      responsive className = "property-pic" / >
      <
      /div> <
      div className = "property-padded" >
      <
      p > some description < /p> <
      /div> <
      /Col> <
      Col xs = {
        12
      }
      md = {
        4
      }
      className = "property-thumbnail"
      key = {
        this.props.key
      } >
      <
      div className = "thumbnail" >
      <
      Image src = "https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg"
      responsive className = "property-pic" / >
      <
      /div> <
      div className = "property-padded" >
      <
      p > some description < /p> <
      /div> <
      /Col> <
      Col xs = {
        12
      }
      md = {
        4
      }
      className = "property-thumbnail"
      key = {
        this.props.key
      } >
      <
      div className = "thumbnail" >
      <
      Image src = "https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg"
      responsive className = "property-pic" / >
      <
      /div> <
      div className = "property-padded" >
      <
      p > some description < /p> <
      /div> <
      /Col> <
      Col xs = {
        12
      }
      md = {
        4
      }
      className = "property-thumbnail"
      key = {
        this.props.key
      } >
      <
      div className = "thumbnail" >
      <
      Image src = "https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg"
      responsive className = "property-pic" / >
      <
      /div> <
      div className = "property-padded" >
      <
      p > some description < /p> <
      /div> <
      /Col> <
      /Row> <
      /Grid>
    );
  }
});

ReactDOM.render( < Test / > , document.getElementById('app'));

.property-grid {
  width: 100%;
  background-color: yellow;
}

.property-row {
  display: flex;
  flex-wrap: wrap;
  background-color: red;
  margin: 2em auto;
  width: 100%;
}

.property-thumbnail {
  background-color: green;
  display: table-cell;
  max-width: 450px;
  padding: 20px;
}

@media (max-width: 991px) {
  .property-thumbnail {
    margin: 2em auto;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.29.4/react-bootstrap.min.js"></script>
<div id='app'></div>

已添加对您的情况有用的媒体查询。

请在查询中调整max-width。 （虽然我很快就会这样做，但会旅行 24 小时）

Answer 2

如果您按照应有的方式使用 Bootstrap 网格，它会按照您想要的方式进行布局。

https://www.codeply.com/go/0pJfjcpGgK

<div class="container properties-grid">
    <div class="row properties-row">
        <div class="col-xs-6 col-md-4 property-thumbnail">
            <img src="//placehold.it/300x200" class="thumbnail center-block">
        </div>
        <div class="col-xs-6 col-md-4 property-thumbnail">
            <img src="//placehold.it/300x200" class="thumbnail center-block">
        </div>
        <div class="col-xs-6 col-md-4 property-thumbnail">
            <img src="//placehold.it/300x200" class="thumbnail center-block">
        </div>
        <div class="col-xs-6 col-md-4 property-thumbnail">
            <img src="//placehold.it/300x200" class="thumbnail center-block">
        </div>
    </div>
</div>