Question

我正在使用bootstrap，我的按钮大小有问题。当我调整屏幕大小（浏览器）时，显然按钮的大小会发生变化但不均匀。

是否有一种简单的方法可以保持相同的尺寸，即它们同时变大（相同的高度）？或欢迎任何其他良好做法..

HTML：

<div class="container" style="max-width:1360px">
        <div class="col-sm-6">
            <button class="btn-block btn-lg alert-info" id="button_add_info">
                <span class="btn-image glyphicon glyphicon-pencil push-left"></span>
                <span>Lorem ipsum dolor sit amet, consectetur.<small> Quibusdam, magni, doloribus.</small></span>
            </button>
        </div>
        <div class="col-sm-6">
            <button class="btn-block btn-lg alert-info" id="button_add_info">
                <span class="btn-image glyphicon glyphicon-pencil"></span>
                <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit?<small> Quibusdam, magni, doloribus, possimus eum sapiente.</small></span>
            </button>
        </div>
    </div>

CSS：

#button_add_info {
background-color:lavender;
border-radius: 0px;
text-shadow:none;
border:none;
box-shadow:none;}

非常感谢！

Answer 1

你是说这个意思吗？

https://jsfiddle.net/gratiafide/wyt8uy0k/

此选项用于为按钮设置css的高度和宽度，以使它们无论您喜欢什么宽度都可以停止调整大小。这样做将覆盖默认的Bootstrap高度和宽度值：

 @media (min-width: 768px) {
    #button_add_info {
        background-color:lavender;
        border-radius: 0px;
        text-shadow:none;
        border:none;
        box-shadow:none;
        height:300px;
        width:250px;
    }
}

#button_add_info {
        background-color:lavender;
        border-radius: 0px;
        text-shadow:none;
        border:none;
        box-shadow:none;
        height:200px;
        width:150px;
    }

调整屏幕大小时保持相同大小的两个按钮

1 个答案: