bootstrap 在 window 调整大小时更改按钮文本大小

Question

需要在 window 调整大小时更改按钮字体大小。（使用 bootstrap3）。我在左侧有菜单，当它全宽（240 像素）时，它看起来像这样：

然后我调整 window 大小，或按按钮切换侧边菜单，它看起来像这样：

我想更改那个按钮的大小，这对我来说就足够了。

按钮代码是：

<div class="sidebar-addevent">
    <a href="#">
        <button class="btn btn-block btn-addevent">+ Add event</button>
    </a>
</div>

该按钮的

和 css 是：

.btn {
    font-size: 13px;
    padding: 7px 12px;
    line-height: 18px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    border-radius: 4px;
}
.btn-addevent {
    background: #213246;
    color: #fff;
    border: 2px solid #5d95ca;
    text-transform: uppercase;
    font-weight: 600;
    transition: .5s;
}
.btn-block {
    display: block;
    width: 100%;
}
.sidebar-addevent {
    text-align: center;
    padding: 30px 30px 15px 10px;
}

Answer 1

好吧，对于 jQuery 的这个问题，我做了一些更改按钮 css 的功能，如果有人遇到类似的问题，请看这里。

$(document).ready(function(){
    changeAddEventBtn();
    window.onresize = function(event) {
        changeAddEventBtn();
    };
    $('#minimize-sidebar').click(function(){
        changeAddEventBtnByClick();
    })      
});

function changeAddEventBtn(){
    if($('#left_menu_for_resize').width() <= 60){
        $('#add_event_btn').css('font-size', '30px');
    }else{
        $('#add_event_btn').css('font-size', '13px');
    }
}
function changeAddEventBtnByClick(){
    if($('#left_menu_for_resize').width() >= 240){
        $('#add_event_btn').css('font-size', '30px');
    }else{
        $('#add_event_btn').css('font-size', '13px');
    }
}

Answer 2

可能会尝试将 class 名称更改为 --> class="btn btn-success sq-btn fr"

Answer 3

尝试添加 HTML 实体和 bootstrap 字形::

    <div class="sidebar-addevent">
      <a href="#">
       <button class="btn btn-block btn-addevent">
         <i class="glyphicon glyphicon-plus"></i>&nbsp;Add event
       </button>
      </a>
    </div>

Answer 4

问题是 a 中有一个 button，这是无效的 HTML5。

尝试删除按钮元素并将按钮-类附加到 link：

<div class="sidebar-addevent">
    <a href="#" class="btn btn-block btn-addevent">+ Add event</a>
</div>

bootstrap 在 window 调整大小时更改按钮文本大小

bootstrap change button text size on window rezise

html

javascript

css

jquery

twitter-bootstrap-3