表单输入未使用Bootstrap 4进行​​排队

Question

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

现在从我所看到的情况来看，这应该都很好，并且在所有尺寸上都可以，直到你看到一个小显示器。然后由于某种原因，输入框和按钮似乎一直到边缘，但其余的内容（标签，标题，文本，标签等）似乎都保持在标签内容框的范围内。 / p>

以下是jsFiddle示例的链接

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

这是为什么？我是否错误地放置了一些东西，或者它只是目前引导程序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

类.tab-content设置为0填充，如果您想要更改以下内容：

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

Answer 2

替代答案，修改.row类以删除负边距：

.row{
 margin-left: 0 !important;
 margin-right: 0 !important;
}