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

将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>

它在手机屏幕宽度上的外观：

---

尝试添加相对于索引框的位置。使用“绝对”定位的元素的行为类似于“固定”，只是相对于最近定位的祖先，而不是相对于视口。如果没有定位的祖先，它将在可用时使用引导的类（如

）相对于视口定位自身。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>

。大按钮{
背景：#9cc64e；
填充物：5px10px；
颜色：#23423a；
字号：18px；
文字装饰：无；
}
.大按钮控制{
填充：0.15%；
}
其他报告
单击此按钮可转到报告索引页面

查看报告

---

在

bootstrap.css

样式表之后加载的“覆盖”中修改bootstrap的类是一个好主意，这样您就可以将其保留在框架内，只需更改所需的位和块，例如按钮颜色，等等。

这很可能是按钮的绝对位置。我喜欢在可能的情况下使用引导类的想法。定位的原因是将按钮保持在索引框的底部。有没有更好的方法来强制按下按钮，这仍然是响应友好的？当然，您可以继续使用

容器上的
位置：绝对
。大按钮cont

并只需摆弄一下位置。我个人的偏好是不这样做，除非我绝对必须这样做，因为我只是喜欢让它自然流动。但这正是我的偏好。：）

.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>