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

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-box 。 HEre是当前的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

在可用时使用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样式表之后加载，这样你就可以将它保留在框架内，只需改变你需要的部分，比如作为按钮颜色等

Answer 2

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