Как центрировать сетку помимо метки?

Question

Я пытаюсь выполнить следующую раскладку:

Однако я застрял в этом:

Я использую Bootstrap.Вот мой HTML-код:

<div class="metrics-group">
          <p>Revenue</p>
          <div class="form-group">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-12">
                  <label for="6month_old_revenue">6 months ago</label>
                  <input type="number" class="form-control" id="6month_old_revenue" maxlength="2" required>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-12">
                  <label for="5month_old_revenue">5 months ago</label>
                  <input type="number" class="form-control" id="5month_old_revenue" maxlength="2" required>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-12">
                  <label for="4month_old_revenue">4 months ago</label>
                  <input type="number" class="form-control" id="4month_old_revenue" maxlength="2" required>
                </div>
            </div>
            <div class="row traction-row>
                <div class="col-lg-3 col-md-3 col-sm-12">
                  <label for="3month_old_revenue">3 months ago</label>
                  <input type="number" class="form-control" id="3month_old_revenue" maxlength="2" required>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-12">
                  <label for="2month_old_revenue">2 months ago</label>
                  <input type="number" class="form-control" id="2month_old_revenue" maxlength="2" required>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-12">
                  <label for="1month_old_revenue">1 month ago</label>
                  <input type="number" class="form-control" id="1month_old_revenue" maxlength="2" required>
                </div>
            </div>
        </div>
</div>

Как мне добиться первого макета изображения?

Answer 1

Вот необходимый код:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
  <p class='col-xs-2' style='text-align: center;'><br/><br/><br/>Revenue (R$)</p>
  <div class="form-group col-xs-10">
    <div class='col-xs-4'>
       <div class="col-xs-12">
           <label for="6month_old_revenue">6 months ago</label>
           <input type="number" class="form-control" id="6month_old_revenue" maxlength="2" required>
       </div>
       <div class="col-xs-12">
           <label for="6month_old_revenue">5 months ago</label>
           <input type="number" class="form-control" id="6month_old_revenue" maxlength="2" required>
       </div>
     </div>
     
    <div class='col-xs-4'>
       <div class="col-xs-12">
           <label for="6month_old_revenue">4 months ago</label>
           <input type="number" class="form-control" id="6month_old_revenue" maxlength="2" required>
       </div>
       <div class="col-xs-12">
           <label for="6month_old_revenue">3 months ago</label>
           <input type="number" class="form-control" id="6month_old_revenue" maxlength="2" required>
       </div>
     </div>
    <div class='col-xs-4'>
       <div class="col-xs-12">
           <label for="6month_old_revenue">2 months ago</label>
           <input type="number" class="form-control" id="6month_old_revenue" maxlength="2" required>
       </div>
       <div class="col-xs-12">
           <label for="6month_old_revenue">1 months ago</label>
           <input type="number" class="form-control" id="6month_old_revenue" maxlength="2" required>
       </div>
     </div>
  </div>
</div>

Answer 2

Используйте row с двумя столбцами

Используйте row с двумя столбцами: один для абзаца revenue и один для групп ввода.Используйте следующие классы для абзаца revenue, чтобы выровнять его по центру контейнера.

1. d-flex - чтобы изменить его свойство display на flex
2. align-items-center - для выравнивания по вертикали в центре его контейнера
3. justify-content-center - для выравнивания по горизонтали в центреего контейнер.

Если вы хотите расположить его вертикально только на экранах sm, используйте align-items-sm-center.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />

<div class="container metrics-group">
  <div class="row">
    <div class="col-4 d-flex align-items-center justify-content-center">
      <p>Revenue</p>
    </div>
    <div class="col">
      <div class="row">
        <div class="form-group col-lg-3 col-md-3 col-sm-12">
          <label for="6month_old_revenue">6 months ago</label>
          <input type="number" class="form-control" id="6month_old_revenue" maxlength="2" required>
        </div>
        <div class="form-group col-lg-3 col-md-3 col-sm-12">
          <label for="5month_old_revenue">5 months ago</label>
          <input type="number" class="form-control" id="5month_old_revenue" maxlength="2" required>
        </div>
        <div class="form-group col-lg-3 col-md-3 col-sm-12">
          <label for="4month_old_revenue">4 months ago</label>
          <input type="number" class="form-control" id="4month_old_revenue" maxlength="2" required>
        </div>
      </div>
      <div class="row traction-row">
        <div class="form-group col-lg-3 col-md-3 col-sm-12">
          <label for="3month_old_revenue">3 months ago</label>
          <input type="number" class="form-control" id="3month_old_revenue" maxlength="2" required>
        </div>
        <div class="form-group col-lg-3 col-md-3 col-sm-12">
          <label for="2month_old_revenue">2 months ago</label>
          <input type="number" class="form-control" id="2month_old_revenue" maxlength="2" required>
        </div>
        <div class="form-group col-lg-3 col-md-3 col-sm-12">
          <label for="1month_old_revenue">1 month ago</label>
          <input type="number" class="form-control" id="1month_old_revenue" maxlength="2" required>
        </div>
      </div>
    </div>
  </div>

</div>

Как видно из кода, я удалил контейнер form-group.Это потому, что form-group только добавляет margin-bottom, не более того.Лучше всего использовать form-group имя класса для входных столбцов, потому что хорошо, что в нижней части ввода есть некоторый запас.

Обновление

На данный момент, тамдве колонки на всех видах устройств.Используйте col-* классы, которые соответствуют вашему дизайну вместо col-4 и col

Answer 3

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 
 <div class="form-group">
        <div class="row">
          <div class="col-lg-3">
            <p>Revenue (R$)</p>
          </div>
          <div class="col-lg-9">

              <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-12">
                  <label for="6month_old_revenue">6 months ago</label>
                  <input type="number" class="form-control" id="6month_old_revenue" maxlength="2" required>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-12">
                  <label for="5month_old_revenue">5 months ago</label>
                  <input type="number" class="form-control" id="5month_old_revenue" maxlength="2" required>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-12">
                  <label for="4month_old_revenue">4 months ago</label>
                  <input type="number" class="form-control" id="4month_old_revenue" maxlength="2" required>
                </div>
            </div>
            <div class="row traction-row">
              <div class="col-lg-3 col-md-3 col-sm-12">
                <label for="3month_old_revenue">3 months ago</label>
                <input type="number" class="form-control" id="3month_old_revenue" maxlength="2" required>
              </div>
              <div class="col-lg-3 col-md-3 col-sm-12">
                <label for="2month_old_revenue">2 months ago</label>
                <input type="number" class="form-control" id="2month_old_revenue" maxlength="2" required>
              </div>
              <div class="col-lg-3 col-md-3 col-sm-12">
                <label for="1month_old_revenue">1 month ago</label>
                <input type="number" class="form-control" id="1month_old_revenue" maxlength="2" required>
              </div>
            </div><!--close inner row -->
    
          </div> <!--close col-9 -->
        </div> <!--close row -->
     </div> <!--close form-group -->