按钮宽度 % 似乎在较小的屏幕上跳出容器

Question

将 bootstrap3 与 mvc5 结合使用。

使用网格系统，我有 4 个连续（"col-md-3"）。这是一盒 HTML:

    <div class="col-md-3">
        <div class="index-box">
            <h2>Other Reports</h2>
            <p>Click this button to go to the report index page.</p>
            <button class="big-button">View Reports</button>
        </div>
    </div>

在全屏模式下，按钮很好地位于框中，但是当我在移动设备上查看时，框是堆叠的（它们应该如此）但是按钮宽度变成了全屏的百分比而不是 .index -盒子。这里是当前 css:

    .index-box {
        border: 1px #527f03 solid;
        border-radius: 5px;
        text-align: center;
        padding-bottom: 20px;
        height: 250px;
        max-width: 260px;
    }

        .index-box h2 {
            position: relative;
            top: -25px;
            background-color: #dfece2;
            display: inline-block;
        }

    .big-button {
       position: absolute;
       margin-left: -35%;
       left: 50%;
       width: 70%;
       max-width: 70%;
       bottom: 20px;
       background: #9cc64e;
       padding: 5px 10px;
       color: #23423a;
       font-size: 18px;
       text-decoration: none;
       }

在移动屏幕宽度上的外观：

Answer 1

尝试添加相对于索引框的位置。使用绝对定位的元素除了相对于最近定位的祖先而不是相对于视口外，其行为类似于固定。如果它没有定位的祖先，它将相对于视口定位自己

Answer 2

在可用时使用 Bootstrap 的类，例如 .btn-block 将为您提供一个全角按钮，然后将其包装在容器中并为其添加边距或填充.并去掉绝对定位...

这应该为您指明正确的方向....

.big-button {
    background: #9cc64e;
    padding: 5px 10px;
    color: #23423a;
    font-size: 18px;
    text-decoration: none;
}
.big-button-cont {
    padding: 0 15%;
}
</style>

<div class="col-md-3">
    <div class="index-box">
        <h2>Other Reports</h2>
        <p>Click this button to go to the report index page.</p>
        <div class="big-button-cont">
            <button class="btn big-button btn-block">View Reports</button>
        </div>
    </div>
</div>

采用 bootstrap 的类并在 bootstrap.css 样式表之后加载的 "override" 中修改它们是个好主意，这样您就可以保留它在框架内修改你需要的点点滴滴，比如按钮颜色等

按钮宽度 % 似乎在较小的屏幕上跳出容器

Button width % seems to jump out of container on smaller screens

css

responsive-design

twitter-bootstrap