css - 为什么我的按钮没有包含在它们的容器中

Question

我有 3 个按钮不影响其父容器的大小，我无法确定原因。

html

<div class="normal-body main-raised">
    <div class="section section-basic">
        <div class="jumbotron jumbotron-fluid">
            <div class="container-fluid text-center">
                <h1 class="text-xs-center">Welcome to the Employee Portal</h1>
            </div>
        </div>

        <div class="container-fluid col-xs-8 col-xs-offset-2 text-xs-center">
            <div class="row">
                <h2>Useful Links</h2>
            </div>
            <div class="row">
                <button class="btn btn-primary btn-raised"><%= link_to "Locations", locations_path, class: "text-white" %></button>
                <button class="btn btn-primary btn-raised"><%= link_to "Employees", fetch_employees_path, class: "text-white" %></button>
                <button class="btn btn-primary btn-raised"><%= link_to "Timecards", timecards_path, class: "text-white" %></button>
            </div>
        </div>
    </div>
</div>

我只使用了来自 Creative Tim Material Kit 的未更改的 Bootstrap css 和元素

这是一个Fiddle (不完美，但明白了要点)

...如果您想查看它，这里是 button css。

.btn.btn-raised:not(.btn-link), .btn-group-raised .btn:not(.btn-link), .input-group-btn .btn.btn-raised:not(.btn-link), .btn-group-raised .input-group-btn .btn:not(.btn-link) {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.btn.btn-raised.btn-primary, .btn.btn-fab.btn-primary, .btn-group-raised .btn.btn-primary, .input-group-btn .btn.btn-raised.btn-primary, .input-group-btn .btn.btn-fab.btn-primary, .btn-group-raised .input-group-btn .btn.btn-primary {
    background-color: #9c27b0;
    color: #ffffff;
}
.btn.btn-raised, .btn.btn-raised.btn-default, .btn.btn-fab, .btn.btn-fab.btn-default, .btn-group-raised .btn, .btn-group-raised .btn.btn-default, .input-group-btn .btn.btn-raised, .input-group-btn .btn.btn-raised.btn-default, .input-group-btn .btn.btn-fab, .input-group-btn .btn.btn-fab.btn-default, .btn-group-raised .input-group-btn .btn, .btn-group-raised .input-group-btn .btn.btn-default {
    background-color: #EEEEEE;
    color: rgba(0, 0, 0, 0.87);
}
.btn, .input-group-btn .btn {
    border: none;
    border-radius: 3px;
    position: relative;
    padding: 12px 30px;
    margin: 10px 1px;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0;
    will-change: box-shadow, transform;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}
.btn-primary {
    color: #fff;
    background-color: #0275d8;
    border-color: #0275d8;
}
.btn {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
}

Answer 1

因为您的标记有点偏离。你不应该让你的 container 与 col-xs 共享同一个类，它应该更像 container > row > col-xs-8.

请看这里 - http://jsfiddle.net/qE9kJ/361/