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

Question

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

然后我调整窗口大小，或按下按钮切换侧面菜单，如下所示：

我想改变那个按钮大小，这对我来说已经足够了。

按钮代码是：

<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

问题是button内有a，这是无效的HTML5。

尝试删除按钮元素并将按钮类附加到链接：

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

Answer 2

我使用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 3

可以尝试将班级名称更改为 - ＆gt; class =＆＃34; btn btn-success sq-btn fr＆＃34;

Answer 4

尝试添加HTML实体和bootstrap glyphicons ::

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