2016-12-31 56 views
8

引導程序4是否有內置的水平分隔符?我可以做到這一點,引導程序4是否有內置的水平分隔符?

<style type="text/css"> 
.h-divider{ 
margin-top:5px; 
margin-bottom:5px; 
height:1px; 
width:100%; 
border-top:1px solid gray; 
} 
</style> 

但我想使用內置引導CSS,我找不到它在文檔中的任何地方,也許我想念它。

回答

16

HTML已經有一個名爲<hr/>(簡稱「橫向規則」)的內置水平分頻器。引導其風格like this

hr { 
    margin-top: 1rem; 
    margin-bottom: 1rem; 
    border: 0; 
    border-top: 1px solid rgba(0, 0, 0, 0.1); 
} 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<p>Some text<hr/>More text<p>

2

對於下拉列表,是:

https://v4-alpha.getbootstrap.com/components/dropdowns/

<div class="dropdown-menu"> 
    <a class="dropdown-item" href="#">Action</a> 
    <a class="dropdown-item" href="#">Another action</a> 
    <a class="dropdown-item" href="#">Something else here</a> 
    <div class="dropdown-divider"></div> 
    <a class="dropdown-item" href="#">Separated link</a> 
</div> 
0

自舉4

<hr>仍然適用於正常的分頻器。但是,如果您想在中間有文字的分隔線:

<div class="row"> 
    <div class="col"><hr></div> 
    <div class="col-auto">OR</div> 
    <div class="col"><hr></div> 
</div>