Bootstrap Row не центрирует столбцы

Я пытаюсь создать макет из 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>

Вот как это выглядит Bootstrap Row не центрирует столбцы

.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. Но потом такое бывает Bootstrap Row не центрирует столбцы

Как сделать так, чтобы первая строка выглядела как первое изображение (столбцы по центру и некоторый промежуток между ними), при этом оставив последнюю строку слева?

Зачем нам этот тегированный Bootstrap? Похоже, вы вообще не используете класс Bootstrap.

— 22.03.2018 21:54

Я использую response-bootstrap, который, по сути, является оболочкой для Bootstrap 3, извините за путаницу!

— 22.03.2018 21:55

Да, но все же .properties-grid и .properties-row полностью настраиваются, так что это не «строка начальной загрузки».

— 22.03.2018 22:01

Я просто дал им имена и настроил их, пытаясь центрировать столбцы. Можно предположить, что это <div class = "row" id = "properties-row"> и <div class = "col-sm-12 col-md-4" id = "property-thumbnail">

— 22.03.2018 22:06

css twitter-bootstrap reactjs twitter-bootstrap-3 react-bootstrap

22.03.2018 21:53

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

2 390

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

22.03.2018 22:15

Ответ принят как подходящий

Просто удалите margin:2em auto; из своего класса .property-thumbnail

It pushes your contents in your class .property-thumbnail to come in the center, if there are less than 3 elements in your property-row

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>

Добавили медиа-запрос, который будет полезен в вашем случае.