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

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;
    }

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

keeping the same size of two button while resizing screen

height

resize

button

twitter-bootstrap-3