저는 부트 스트랩을 처음 접했고 그것을 알아가는 과정에 있습니다. 페이지 중앙에 드롭 다운 메뉴를 배치하려고합니다. 메뉴를 토글하는 링크를 중앙에 배치했지만이 메뉴는 제자리에 표시되지 않습니다.
이것이 내가 시도한 것입니다.
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<div class="dropdown">
<a id ="dLabel" data-toggle="dropdown" href="#">Despliega menú<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.google.com" target="_blank">Google</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.facebook.com" target="_blank">Facebook</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.stackoverflow.com" target="_blank">Stack Overflow</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" target="_blank">Mi Web</a>
</li>
</ul>
</div>
<!-- /div.dropdown -->
</div>
<!-- /div.col-md-4 .col-md-offset-4 -->
</div>
<!-- /div.row -->
</div>
<!-- /div.container -->
내가 .text-center모든 것을 포함하는 div에 사용 하고 있기 때문에 분명히 링크가 중심이며 클래스를 사용해 보았지만 center-block도움이되지 않습니다. 힌트가 있습니까?
드롭 다운은 블록 요소이므로 text-align : center로 정렬하면 블록 요소에서 작동하지 않습니다. display : inline-block on dropdown div를 추가해보세요. jsfiddle ex를 확인하십시오. http://jsfiddle.net/kuyabiye/KLH8S/
<style>
.dropdown-center {
text-align: center;
}
.dropdown-center .dropdown {
display: inline-block;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 dropdown-center">
<div class="dropdown">
<a id ="dLabel" data-toggle="dropdown" href="#">Despliega menú<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.google.com" target="_blank">Google</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.facebook.com" target="_blank">Facebook</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.stackoverflow.com" target="_blank">Stack Overflow</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" target="_blank">Mi Web</a>
</li>
</ul>
</div>
<!-- /div.dropdown -->
</div>
<!-- /div.col-md-4 .col-md-offset-4 -->
</div>
<!-- /div.row -->
</div>
<!-- /div.container -->
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다