Question

出于这个原因，我将Bootstrap 4用于样式设计。我陷入了对齐问题，那就是我希望按钮与它们上方的日期和时间字段平行。

图像中的蓝色十字表示我的按钮当前是从那里开始的，这是我不希望的。

红线表示应该从这里开始我的按钮和所有字段，我已经尝试了自举网格中的偏移量和flexbox的许多组合，但是我无法解决此问题。

随附代码：

<form>

    <div class="form-group row">
        <label for="Number of Guests" class="col-md-2 col-form-label">Number of Guests</label>
        <div class="col-md-10">
            <div class="row">
                <!-- Material inline 1 -->
                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" id="materialInline1" name="inlineMaterialRadiosExample">
                    <label class="form-check-label" for="materialInline1">1</label>
                </div>

                <!-- Material inline 2 -->
                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" id="materialInline2" name="inlineMaterialRadiosExample">
                    <label class="form-check-label" for="materialInline2">2</label>
                </div>

                <!-- Material inline 3 -->
                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" id="materialInline3" name="inlineMaterialRadiosExample">
                    <label class="form-check-label" for="materialInline3">3</label>
                </div>

                <!-- Material inline 4 -->
                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" id="materialInline1" name="inlineMaterialRadiosExample">
                    <label class="form-check-label" for="materialInline1">4</label>
                </div>

                <!-- Material inline 5 -->
                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" id="materialInline2" name="inlineMaterialRadiosExample">
                    <label class="form-check-label" for="materialInline2">5</label>
                </div>

                <!-- Material inline 6 -->
                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" id="materialInline3" name="inlineMaterialRadiosExample">
                    <label class="form-check-label" for="materialInline3">6</label>
                </div>
            </div>
        </div>
    </div>

    <div class="row col-md-10">
        <label for="section" class="col-12 col-md-2 col-form-label">Section</label>
        <div class="form-group row ">
            <div class="form-group row">
                <div class="offset-md-2 col-md-10">
                    <button type="submit" class="btn btn-secondary">Cancel</button>
                </div>
            </div>

            <div class="form-group row">
                <div class="offset-md-2 col-md-10">
                    <button type="submit" class="btn btn-primary">Reserve</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row col-md-10">
        <label for="dateandtime" class="col-12 col-md-2 col-form-label">Date and Time</label>
        <div class="col-6 col-md-3">
            <input type="date" class="form-control" id="date" placeholder="Date">
        </div>
        <div class="col-6 col-md-3">
            <input type="time" class="form-control" id="time" placeholder="Time">
        </div>
    </div>
    <div class="row col-md-10">
        <div class="form-group row">
            <div class="offset-md-1 col-md-10">
                <button type="submit" class="btn btn-secondary">Cancel</button>
            </div>
        </div>

        <div class="form-group row">
            <div class="offset-md-1 col-md-12">
                <button type="submit" class="btn btn-primary">Reserve</button>
            </div>
        </div>
    </div>
</form>

Answer 1

我只能建议您阅读此页面。 https://getbootstrap.com/docs/4.0/layout/grid/

Bootstrap使用每行12列的网格系统。我可以看到您正在一起使用不同的类，这些类不是要混在一起的。

对于初学者来说，您的按钮混合使用行和行。这不是应该使用的方式。

 <div class="row col-md-10">
        <div class="form-group row">
            <div class="offset-md-1 col-md-10">
                <button type="submit" class="btn btn-secondary">Cancel</button>
            </div>
        </div>

        <div class="form-group row">
            <div class="offset-md-1 col-md-12">
                <button type="submit" class="btn btn-primary">Reserve</button>
            </div>
        </div>
    </div>

我建议您从链接中提供的更简单的解决方案开始。具有2列的行。看看哪里能找到你。

    <div class="row">
        <div class="col-sm">
            <button type="submit" class="btn btn-secondary">Cancel</button>
        </div>

        <div class="col-sm">
            <button type="submit" class="btn btn-primary">Reserve</button>
        </div>
</div>

Answer 2

关于这些元素无法正确对齐的原因，有几件事：

永远不要在同一课程中使用.row和.col，而应该像这样布置它们：

<form>
    <div class="row">
        <div class="col-md-4">
            I am a column on the left (4/12)
        </div>
        <div class="col-md-10">
            I am a column on the right (10/12)
        </div>
    </div>
</form>

第二，我注意到在某些地方您在列旁边有一行。这不是很好的做法。如果您想要子列，则应按照以下步骤进行操作：

<div class="row">
    <div class="col-6">
        <div class="row">
            <div class="col-md-4">
                I am inside of a larger column
            </div>
            <div class="col-md-10">
                So am I!
            </div>
        </div>
    </div>
</div>

它可能会帮助您阅读Bootstrap 4网格文档的更多信息，该文档可以在here上找到。

我希望这有助于清除一些问题，让我知道您是否仍然感到困惑。

Answer 3

尝试一下：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<form>
  <div class="container-fluid">
    <div class="row my-4">
      <div class="col-md-2">
        <label for="Number of Guests" class="col-form-label">Number of Guests</label>
      </div>
      <div class="col-md-10">
        <div class="row">
          <!-- Material inline 1 -->
          <div class="form-check form-check-inline ml-3">

            <div class="form-check-inline mr-4">
              <label class="form-check-label" for="radio1">
                                <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1">1
                            </label>
            </div>
            <div class="form-check-inline mr-4">
              <label class="form-check-label" for="radio2">
                                <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">2
                            </label>
            </div>
            <div class="form-check-inline mr-4">
              <label class="form-check-label" for="radio3">
                                <input type="radio" class="form-check-input" id="radio3" name="optradio" value="option2">3
                            </label>
            </div>
            <div class="form-check-inline mr-4">
              <label class="form-check-label" for="radio4">
                                <input type="radio" class="form-check-input" id="radio4" name="optradio" value="option1" >4
                            </label>
            </div>
            <div class="form-check-inline mr-4">
              <label class="form-check-label" for="radio5">
                                <input type="radio" class="form-check-input" id="radio5" name="optradio" value="option2">5
                            </label>
            </div>
            <div class="form-check-inline mr-4">
              <label class="form-check-label" for="radio5">
                                <input type="radio" class="form-check-input" id="radio5" name="optradio" value="option2">6
                            </label>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="row my-4">
      <div class="col-md-2">
        <label for="section" class="col-form-label">Section</label>
      </div>
      <div class="col-md-10">
        <div class="form-group ">
          <button type="submit" class="btn btn-secondary">Cancel</button>
          <button type="submit" class="btn btn-primary">Reserve</button>
        </div>
      </div>
    </div>
    <div class="row my-4">
      <div class="col-md-2">
        <label for="dateandtime" class="col-form-label">Date and Time</label>
      </div>
      <div class="col-md-10">
        <div class="form-group d-flex">
          <input type="date" class="form-control col-md-3" id="date" placeholder="Date">
          <input type="time" class="form-control col-md-2 ml-3" id="time" placeholder="Time">
        </div>
      </div>
    </div>
    <div class="row my-4">
      <div class="offset-md-2 col-md-10">
        <button type="submit" class="btn btn-secondary">Cancel</button>
        <button type="submit" class="btn btn-primary">Reserve</button>
      </div>
    </div>
  </div>
</form>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer 4

我相信您正在寻找与此类似的结果，并非所有id和类都相同，但是此代码段为您提供了更多学习而非复制的机会。请查看我的代码，并尝试了解您提供的代码与我提供的示例之间的区别。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="form-group">
    <div class="row">
      <div class="col-md-2">
        <label>
          Number of Guests
        </label>
      </div>
      <div class="col-md-10">
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" id="materialInline1" />
          <label class="form-check-label" for="materialInline1">1</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" id="materialInline1" />
          <label class="form-check-label" for="materialInline1">2</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" id="materialInline1" />
          <label class="form-check-label" for="materialInline1">3</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" id="materialInline1" />
          <label class="form-check-label" for="materialInline1">4</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" id="materialInline1" />
          <label class="form-check-label" for="materialInline1">5</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" id="materialInline1" />
          <label class="form-check-label" for="materialInline1">6</label>
        </div>
      </div>
    </div>
  </div>
  
  <div class="form-group">
    <div class="row">
      <div class="col-md-2">
        <label>
          Section
        </label>
      </div>
      <div class="col-md-10">
        <button class="btn btn-secondary" type="submit">
          Cancel
        </button>
        <button class="btn btn-primary" type="submit">
          Reserve
        </button>
      </div>
    </div>
  </div>
  
  <div class="form-group">
    <div class="row">
      <div class="col-md-2">
        <label>
          Date & Time
        </label>
      </div>
      <div class="col-md-6">
        <div class="row">
          <div class="col-6">
            <input id="date" class="form-control" type="date">
          </div>
          <div class="col-6">
            <input id="time" class="form-control" type="time">
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="row">
    <div class="col-12">
      <button class="btn btn-secondary" type="submit">
        Cancel
      </button>
      <button class="btn btn-primary" type="submit">
        Reserve
      </button>
    </div>
  </div>
</form>

我希望这会有所帮助，祝您好运！

Bootstrap4中的对齐问题

4 个答案: