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

【问题标题】：Button width % seems to jump out of container on smaller screens按钮宽度 % 似乎在较小的屏幕上跳出容器
【发布时间】：2015-05-12 03:23:08
【问题描述】：

将 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-box .这是当前的 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;
       }

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

【问题讨论】：

这很可能是您对按钮的绝对定位。

标签： css twitter-bootstrap responsive-design

【解决方案1】：

在可用时使用 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.css 样式表之后加载的“覆盖”中修改它们是个好主意，这样您就可以将其保留在框架内，只需更改您需要的点点滴滴，例如按钮颜色等

【讨论】：

我喜欢尽可能使用引导类的想法。定位的原因是将按钮保持在索引框的底部。有没有更好的方法来强制按下按钮，仍然是响应友好的？
当然，您可以继续在.big-button-cont 容器上使用position:absolute 并随意调整定位。我个人的偏好是不这样做，除非我绝对必须这样做，因为我只是想让它自然流动。但这只是我的偏好。 :)

【解决方案2】：

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

【讨论】：