除标签外如何居中网格？

Question

我正在尝试完成以下布局：

然而我陷入了困境：

我正在使用Bootstrap。这是我的HTML代码：

rowIndex

如何实现第一张图片布局？

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

以下是必需的代码：

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

使用带有两列的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