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类。默认情况下，引导程序设置padding-left：15px; col 类。 class =“ col”是空格/对齐的原因。

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

Answer 2

这是因为不同的元素对col-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>

offset-4元素不对齐

2 个答案: