Html Bootstrap4中的对齐问题

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

图中的蓝色十字表示我的按钮当前从那里开始，这是我不想要的

红线表示我的按钮和所有字段都应该从这里开始，我已经尝试了引导网格中的偏移量和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>

客人人数
1.
2.
3.
4.
5.
6.
部分
取消
储备
日期和时间
取消
储备

我只能建议您阅读本页。

引导使用每行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>

取消
储备

我建议您从链接中提供的更简单的解决方案开始。 有两列的行。看看你能得到什么

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

取消
储备

因此，关于这些元素没有正确对齐的原因，有以下几点：

您不应在同一类中使用

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

我是左边的一列（4/12）
我是右边的一列（10/12）

其次，我注意到在某些地方，在列旁边有一行。这不是很好的做法。如果需要子列，应按如下方式执行：

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

我在一根更大的柱子里
我也是！

它可能会帮助您阅读更多有关Bootstrap4Grid的文档，这些文档可以找到

我希望这有助于澄清一些问题，如果您仍然有点困惑，请告诉我。

试试这个：

客人人数
1.
2.
3.
4.
5.
6.
部分
取消
储备
日期和时间
取消
储备

我相信您正在寻找与此类似的结果，并非所有id和类都相同，但这段代码更适合您学习而不是复制。请检查我的代码，并试着理解您的代码与我提供的示例之间的差异

客人人数
1.
2.
3.
4.
5.
6.
部分
取消
储备
日期和时间
取消
储备

让我调查一下，让我调查一下，我仍然无法解决问题，很抱歉我尝试过更改它，但它不但没有变得更好，反而变得更糟。请帮助我向您提供指导，我了解我在代码中实施了什么不好的做法，因此我在编辑代码时遇到了困难。不用担心，我明白了。一旦你以这种方式开始了一件事，你就很难去挖掘，看看到底出了什么问题。我的建议是确保您的代码在整个开发过程中是干净的。很高兴我能帮忙！