반응형 부트스트랩 Navbar에서 콘텐츠를 중앙에 배치하는 방법은 무엇입니까?

반응형 Bootstrap Navbar에서 콘텐츠를 중앙에 배치하는 방법

Bootstrap Navbar에서 콘텐츠를 정렬하는 데 어려움을 겪고 계십니까? 다음은 많은 사용자에게 안정적으로 작동한 포괄적인 솔루션입니다.

문제 이해

Bootstrap의 기본 navbar 정렬은 특히 반응형 레이아웃을 대상으로 할 때 문제가 될 수 있습니다. 범인은 내부 탐색과 관련된 float: left 속성인 경우가 많습니다.

해결책

콘텐츠를 중앙에 배치하려면 float: left를 제거해야 합니다. 내부 탐색을 수행하고 인라인 블록으로 만듭니다. 또한 text-align 속성을 중앙으로 설정하면 콘텐츠가 가로로 정렬됩니다.

CSS 수정

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

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

예

CSS 변경 사항을 구현하면 콘텐츠가 중앙에 배치됩니다. navbar.

<!-- ...navbar code here -->

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

  .navbar .navbar-collapse {
    text-align: center;
  }
</style>

<!-- ...navbar code here -->

추가 고려 사항

축소되지 않은 navbar에 대해서만 정렬 변경이 발생하도록 하려면 CSS 수정 사항을 적절한 미디어 쿼리 내에 포함하는 것을 고려하세요.

@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }

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

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