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

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

Bootstrap Navbar에서 콘텐츠를 중앙에 배치하는 것은 실망스러운 작업일 수 있습니다. 특히 일반적으로 제안되는 경우 솔루션이 실패합니다. 이 문서에서는 이 문제를 해결하는 간단하고 효과적인 방법을 제공합니다.

탐색 모음의 HTML 구조가 표준으로 나타납니다. 그러나 CSS 스타일이 약간 다릅니다. 부트스트랩은 기본적으로 탐색 모음 내용을 왼쪽으로 정렬합니다. 중앙에 맞추려면 다음 단계를 따르세요.

1. .navbar .navbar-nav에서 왼쪽 부동 소수점 제거: 이 수정으로 내부 탐색에서 왼쪽 정렬이 제거됩니다.
2. 다음을 표시하도록 .navbar .navbar-nav 설정: inline-block: 탐색 링크를 인라인 요소로 변환합니다.
3. .navbar .navbar-collapse에서 텍스트를 중앙에 배치합니다: 이 단계는 탐색이 접힐 때 콘텐츠를 중앙에 배치합니다.

업데이트된 내용은 다음과 같습니다. CSS:

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

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

이 솔루션은 모든 화면 크기에서 콘텐츠를 중앙에 배치해야 합니다. 그러나 탐색 표시줄이 축소되지 않은 경우에만 이 효과를 원하는 경우 미디어 쿼리를 사용할 수 있습니다.

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

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

이렇게 하면 화면 너비가 768px보다 크거나 같은 경우에만 센터링 효과가 적용됩니다. 디자인에 필요한 대로 중단점을 조정하세요.

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