Question

结盟使我发疯。如何使该中心行居中对齐和中间对齐？ https://www.screencast.com/t/QgEZNvEiQIi

当前的类是尝试我能想到的一切的结果，因此它们很可能是错误的。实际的代码是：

<div class="sticky-top text-center justify-content-center">
   <form action="" method="post" class="my-2 form-inline">
      <input type="hidden" name="timeEnd" value="{ts '2019-07-16 13:56:34'}">
      <div class="form-row w-100 text-center">
         <div class="col-xl-4 form-group flex-nowrap align-middle">
            <div>
               <h3>Shop Monitor</h3>
            </div>
            <div class="form-check ml-auto">
               <input class="form-check-input" type="checkbox" id="showAll" name="showAll" onchange="toggleData();">
               <label class="form-check-label" for="showAll">
               Show all 
               </label>
            </div>
         </div>
         <div class="col-xl-4 form-group flex=center flex-nowrap">
            <div class="row flex-nowrap align-middle">
               <div class="col text-center align-middle"><input type="submit" class="btn btn-outline-secondary btn-sm mx-2" name="back" value="<<<"></div>
               <div class="col text-center px-2">7/16/19 01:56</div>
               <div class="col text-center px-2">==&gt;</div>
               <div class="col text-center px-2">7/16/19 13:56</div>
               <div class="col text-center align-middle"><input type="submit" class="btn btn-outline-secondary btn-sm mx-2" name="fwd" value=">>>" disabled=""></div>
            </div>
         </div>
         <div class="col-xl-4">
            <div class="text-xl-right text-center align-middle">
               <select class="form-control" id="sampleRate" name="sampleRate" onchange="this.form.submit();">
                  <option value="4"> 4 hours (Sample rate: 3m)</option>
                  <option value="10" selected=""> 12 hours (Sample rate: 10m)</option>
                  <option value="20"> 24 hours (Sample rate: 20m)</option>
                  <option value="60"> 3 days (Sample rate: 1hr)</option>
                  <option value="140"> 1 week (Sample rate: 2hr)</option>
                  <option value="280"> 2 weeks (Sample rate: 4hr)</option>
                  <option value="360"> 1 month (Sample rate: 6hr)</option>
               </select>
            </div>
         </div>
      </div>
   </form>
</div>

如果您能告诉我一种简单的方法来使此栏变粘，同时又很粘，则导航栏会很棒。任何设计建议/批评也将不胜感激。我不是UX用户，但我正在尝试学习。

Answer 1

就像我在评论中说的那样，您使用了错误的类。请签出以下代码段（我标记了更改班级的地方）

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="sticky-top text-center justify-content-center">
       <form action="" method="post" class="my-2 form-inline">
          <input type="hidden" name="timeEnd" value="{ts '2019-07-16 13:56:34'}">
          <div class="form-row w-100 text-center">
             <div class="col-xl-4 form-group flex-nowrap align-middle">
                <div>
                   <h3>Shop Monitor</h3>
                </div>
                <div class="form-check ml-auto">
                   <input class="form-check-input" type="checkbox" id="showAll" name="showAll" onchange="toggleData();">
                   <label class="form-check-label" for="showAll">
                   Show all 
                   </label>
                </div>
             </div>


<!-- CHANGES IN THE FOLLOWING TWO LINES IN THE CLASSES! --->
             <div class="col-xl-4 form-group d-flex justify-content-center align-items-center flex-nowrap">
                <div class="row flex-nowrap d-flex align-items-center">
                   <div class="col text-center align-middle"><input type="submit" class="btn btn-outline-secondary btn-sm mx-2" name="back" value="<<<"></div>
                   <div class="col text-center px-2">7/16/19 01:56</div>
                   <div class="col text-center px-2">==&gt;</div>
                   <div class="col text-center px-2">7/16/19 13:56</div>
                   <div class="col text-center align-middle"><input type="submit" class="btn btn-outline-secondary btn-sm mx-2" name="fwd" value=">>>" disabled=""></div>
                </div>
             </div>
             <div class="col-xl-4">
                <div class="text-xl-right text-center align-middle">
                   <select class="form-control" id="sampleRate" name="sampleRate" onchange="this.form.submit();">
                      <option value="4"> 4 hours (Sample rate: 3m)</option>
                      <option value="10" selected=""> 12 hours (Sample rate: 10m)</option>
                      <option value="20"> 24 hours (Sample rate: 20m)</option>
                      <option value="60"> 3 days (Sample rate: 1hr)</option>
                      <option value="140"> 1 week (Sample rate: 2hr)</option>
                      <option value="280"> 2 weeks (Sample rate: 4hr)</option>
                      <option value="360"> 1 month (Sample rate: 6hr)</option>
                   </select>
                </div>
             </div>
          </div>
       </form>
    </div>

Bootstrap 4中心和中间对齐表单元素

1 个答案: