窗口调整大小时引导更改按钮文本大小答案

【问题标题】：bootstrap change button text size on window rezise窗口调整大小时引导更改按钮文本大小
【发布时间】：2015-04-11 12:34:19
【问题描述】：

需要在窗口调整大小时更改按钮字体大小。（使用 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;
}

【问题讨论】：

如果使用 twitter bootstrap 3，当然一切都会响应。无需为此添加任何额外的 css。 '

'

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

问题是您在a 中有一个button，这不是有效的HTML5。

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

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

【讨论】：

【解决方案2】：

通过添加 HTML 实体和引导 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>

【讨论】：

其实这个想法还不错，但就我而言，由于设计原因，它不适合这个项目:)

【解决方案3】：

可以尝试将类名更改为 --> class="btn btn-success sq-btn fr"

【讨论】：

【解决方案4】：

好吧，我用 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');
    }
}

【讨论】：