偏移量-4元素不对齐。

Question

这是一个非常基本的问题(学习Bootstrap/Bootstrap4)。

我不明白为什么下面的“按钮”不与上面的两个元素对齐。我试过很多种变体，但我还是不明白。

我不是在“寻找科德斯”，而是在寻找我在这里的理解中的缺陷。没有其他CSS活动。

​

​

​

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


    <div class="container">
        <form>
            <fieldset>
                <div class="form-group">
                    <div class="row">
                        <label for="project-directory" class="col-4 col-form-label text-right">Project Directory</label>
                        <input type="text" class="col col-6 form-control" id="project-directory" placeholder="Select directory. . .">
                        <small class="offset-4 form-text text-muted mb-3">Select or create the directory where the project should be saved</small>
                    </div>
                    <div class="row">
                        <div class="col offset-4">
                            <button class="btn btn-primary">Button</button>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>

​

更新： Ok --使用Chrome工具，我现在可以看到为col添加的填充(在提出问题之前应该考虑查看)。我正在学习一个视频教程，我认为老师说col将被添加到每个元素中，即使添加了col-4或offset-2这样的标记。在我看来是多余的，- but，似乎有很多是多余的，- like，btn btn-primary的使用

​

​

Answer 1

<div class="offset-4">
  <button class="btn btn-primary">Button</button>
</div>

您使用了col类。默认情况下，为col类设置空白-左:15 by；。class="col“是空间/对齐的原因。

https://codepen.io/rajibchandrakarmaker/pen/mjmYpM

Answer 2

这是因为不同的元素以不同的方式对拥有cod-4类作出反应。将其调整为只使用div，所有内容都对齐：

​

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <form>
        <fieldset>
            <div class="form-group">
                <div class="row">
                  <div class="col-4">First</div>
                  <div class="col-6">Second</div>
                </div>
                <div class="row">
                    <div class="col offset-4">
                        <button class="btn btn-primary">Button</button>
                    </div>
                </div>
            </div>
        </fieldset>
    </form>
</div>

​