bootstrap更改按钮窗口rezise上的文本大小

问题描述：

需要更改窗口上的按钮字体大小调整大小。（使用bootstrap3）。我在左侧菜单中时，它的全宽（320x240像素），它看起来像这样：bootstrap更改按钮窗口rezise上的文本大小

enter image description here

，然后我调整窗口，或按按钮来切换侧面菜单，它看起来像这样：

enter image description here

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

按钮的代码是：

<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的引导3人used.No需要添加任何额外的CSS这一点。 '

' – 2015-02-11 10:05:09

答

以及我做一些功能改变按钮的CSS针对此问题与jQuery，所以这里是如果有人会有类似的问题。

$(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'); 
    } 
}

答

可能是试图改变类的名称 - >类= “BTN BTN-成功SQ-BTN FR”

答

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

试试这个

其实并没有那么糟糕的想法，但在我的情况下，它不适合这个项目，因为设计:) – Scorpioniz 2015-02-11 10:58:07

答

问题是在a内有一个button，它不是有效的HTML5。

尝试删除按钮元素和按钮类连接，而不是链接：

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

bootstrap更改按钮窗口rezise上的文本大小

相关推荐