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

來源

2015-02-11 Scorpioniz

當然一切都會響應，如果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'); 
    } 
}

來源

2015-02-11 08:42:22 Scorpioniz

可能是試圖改變類的名稱 - >類= 「BTN BTN-成功SQ-BTN FR」

來源

2015-02-11 09:38:29

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

試試這個

來源

2015-02-11 10:12:31

其實並沒有那麼糟糕的想法，但在我的情況下，它不適合這個項目，因爲設計:) – 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>

來源

2015-02-11 10:59:23 Rudi

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

回答

相關問題