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

更新:好的 – 使用 Chrome 开发工具，我现在可以看到为 col 添加的填充(在问问题之前应该考虑看看)。我正在看一个视频教程，我认为讲师说要将 col 添加到每个元素，即使像 col-4 或 offset-2 这样的标签也是如此 也被添加了。对我来说似乎是多余的——但似乎有很多是多余的——比如使用 btn btn-primary

Answer 1

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

您使用过col class。默认 Bootstrap 设置 padding-left: 15px;对于 col 类。class="col"是空格/对齐的原因。

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