如何使用 Bootstrap 将多行集中在一列中？

Question

我有一个带有 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>我知道这对于专业的网络开发人员来说看起来很糟糕，但我不是造型方面的专家，如果可以的话请帮助我。

Answer 1

justify-content-center可行，但没有人给出答案，所以我就这么做了。

请参阅下面的片段以帮助您理解。

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