html - 表单输入未使用 Bootstrap 4 排列

Question

我在这里创建了一个示例 jsFiddle，其中的 html 直接从我的网页复制而来。我已经包含了我使用 sass 编译的 bootstrap 4 的 css，以及我的其他 css。

现在，据我所见，这应该一切正常，并且在所有尺寸上都可以，直到您看到一个小显示器。然后由于某种原因，输入框和按钮似乎一直到边缘，但其余内容(标签、标题、p 文本、选项卡等)似乎留在选项卡内容框的范围内。

这是 jsFiddle 示例的链接

https://jsfiddle.net/Gillardo/y3Lr9sbf/1/

这是为什么？我有没有错误地放置一些东西，或者这只是目前 bootstrap 4 的一个错误？我在这里问是因为如果我转到 bs4 示例，它的布局是正确的，您可以在此处找到，而且我无法说出我做了哪些不同的事情 http://v4-alpha.getbootstrap.com/components/forms/#using-the-grid

我的表单是如何创建的一个例子，使用 form-group 是这样的

<div class="row form-group">
    <label class="col-sm-3 form-control-label">Label</label>
    <div class="col-sm-9 col-md-7">
        <input class="form-control form-control-lg ng-pristine ng-untouched ng-valid" disabled="disabled">
    </div>
</div>

Answer 1

Class .tab-content 设置了 0 填充，如果你想要一些改变如下:

.nav-pills+.tab-content {
    border: 0;
    padding-bottom: 3rem;
    padding-left: 0; // <-- change
    padding-right: 0; // <-- change
}