如何使用 Bootstrap 使列中的多行居中？答案

【问题标题】：How to center multiple rows in a column using Bootstrap?如何使用 Bootstrap 使列中的多行居中？
【发布时间】：2020-07-29 23:23:09
【问题描述】：

我有一个带有 3 个行 div 的 col div，我想将它们放在 col div 的中心，如图所示，行 div 位于 col div 的左侧，而我没有不知道如何将它们放在 col div 的中心。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col text-center">
  <div class="row">
    <div id="tantargyselectdiv" class="col-sm-5">
      <select name="tantargyselect" id="tantargyselect">
      </select>
    </div>
    <div class="col-sm-5 text-center">
      <div class="form-group">
        <button type="submit" class="btn btn-primary">Mehet</button>
      </div>
    </div>
  </div>
  <div class="row">
    <div id="tanarselectdiv" class="col-sm-5">
      <select name="tanarselect" id="tanarselect">
      </select>
    </div>
    <div class="col-sm-5 text-center">
      <div class="form-group">
        <button type="submit" class="btn btn-primary">Mehet</button>
      </div>
    </div>
  </div>
  <div class="row">
    <form action="{{URL::to('statisztikaBetoltFelev')}}" method="post">
      <input type="hidden" name="_token" value="{!! csrf_token() !!}">
      <div id="felevselectdiv" class="col-sm-5 text-center">
        <select name="felevselect" id="felevselect">
        </select>
      </div>
      <div class="col-sm-5 text-center">
        <div class="form-group">
          <button type="submit" class="btn btn-primary">Mehet</button>
        </div>
      </div>
    </form>
  </div>
</div>

我知道这对于专业的网络开发人员来说看起来很糟糕，但我不是样式专家，如果可以的话，请帮助我。

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example
你试过<div class="row mx-auto">
我已经删除了不必要的代码
是的，我试过 mx-auto，但没有帮助
你可以试试justify-content-md-center而不是mx-auto

标签： html css laravel bootstrap-4

【解决方案1】：

正如许多用户在评论部分所说，justify-content-center 会起作用，但没有人给出答案，所以我这样做了。

请参阅下面的 sn-p 帮助您理解。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col text-center">
  <div class="row justify-content-center">
    <div id="tantargyselectdiv" class="col-sm-5">
      <select name="tantargyselect" id="tantargyselect">
      </select>
    </div>
    <div class="col-sm-5 text-center">
      <div class="form-group">
        <button type="submit" class="btn btn-primary">Mehet</button>
      </div>
    </div>
  </div>
  <div class="row justify-content-center">
    <div id="tanarselectdiv" class="col-sm-5">
      <select name="tanarselect" id="tanarselect">
      </select>
    </div>
    <div class="col-sm-5 text-center">
      <div class="form-group">
        <button type="submit" class="btn btn-primary">Mehet</button>
      </div>
    </div>
  </div>
  <div class="row justify-content-center">
    <form action="{{URL::to('statisztikaBetoltFelev')}}" method="post">
      <input type="hidden" name="_token" value="{!! csrf_token() !!}">
      <div id="felevselectdiv" class="col-sm-5 text-center">
        <select name="felevselect" id="felevselect">
        </select>
      </div>
      <div class="col-sm-5 text-center">
        <div class="form-group">
          <button type="submit" class="btn btn-primary">Mehet</button>
        </div>
      </div>
    </form>
  </div>
</div>

【讨论】：