2016-12-31 1 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

, 예 : 부트 스트랩 4

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

<hr>은 정상 분배 자에서 여전히 작동합니다. 그러나 중간에 텍스트가있는 구분선이 필요한 경우 :

<div class="row"> 
    <div class="col"><hr></div> 
    <div class="col-auto">OR</div> 
    <div class="col"><hr></div> 
</div> 
관련 문제