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＆gt; row＆gt; col-xs-8。

请参阅此处 - http://jsfiddle.net/qE9kJ/361/

Answer 2

找到这个类'section section-basic'...你需要清除那里的花车

<div class="section section-basic">
  
  <!--Your code-->
  </div>
  <!--just add this line-->
  <div style="clear:both;"></div>

为什么我的按钮不包含在其容器中

2 个答案: