Bootstrap 3 Navbar에서 콘텐츠를 중앙에 배치하는 방법은 무엇입니까?

반응형 부트스트랩 Navbar에서 콘텐츠 중심 맞추기

질문:

온라인에서 수많은 솔루션을 탐색하고 있음에도 불구하고, Bootstrap 3 탐색 모음에서 콘텐츠를 중앙에 배치하는 데 문제가 있습니다. 코드 호환성을 유지하면서 콘텐츠를 적절하게 정렬하는 CSS나 메서드를 지원할 수 있나요?

샘플 코드:

<nav class="navbar navbar-default" role="navigation">
  <!--- ... -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <!--- ... -->
    </ul>
  </div>
</nav>

답변:

방법:

콘텐츠를 중앙에 배치하려면 CSS를 수정하세요. .navbar, .navbar-nav 및 .navbar 중 .navbar-collapse 클래스는 다음과 같습니다.

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

설명:

이러한 변경 사항을 통해 다음을 수행할 수 있습니다.

• 기본 부동 소수점 제거 : .navbar .navbar-nav의 왼쪽 속성으로 항목을 정렬할 수 있습니다. 나란히.
• 디스플레이 설정: inline-block; 적절한 간격을 유지하면서 탐색 항목을 인라인 요소로 만듭니다.
• text-align: center를 사용하여 탐색 모음 내에서 텍스트를 가운데에 맞춥니다. on .navbar .navbar-collapse.

추가 참고 사항:

• 더 큰 화면에서만 중앙 정렬 효과를 원하는 경우 CSS를 적절한 화면 크기를 대상으로 하는 미디어 쿼리.
• CSS를 사용하여 미세 조정 콘텐츠의 정확한 배치.

위 내용은 Bootstrap 3 Navbar에서 콘텐츠를 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!