BootStrap 내 비게 이 션 표시 줄 문제 기록

오늘 완 료 된 일:(test 9 의 응답 식 네 비게 이 션 바 의 수직 평 점 과 드 롭 다운 목록 의 중간 문 제 를 실현 합 니 다.)
나 는 가장 번 거 로 운 것 은 boottstrap 의 형식 에서 수정 하 는 것 이 라 고 생각한다.나 는 내 비게 이 션 바 를 학대 하기 위해 데 모 를 여러 번 했다.근 데 계속 갈 피 를 못 잡 겠 어 요.어젯밤 늑대인 간 살 해 를 마 친 후 갑자기 신기 가 반 짝 거 렸 다 는 것 을 알 았 다.
내부 의 고정 고 도 를 통 해 수직 평 분 효 과 를 실현 할 수 있 을 까?
psd 그림 을 보 는 효 과 는 네 비게 이 션 표시 줄 의 a 가 수직 으로 나 뉘 어 있 습 니 다.

그럼 저 는 a 하이퍼링크 의 높이 를 고정 시 켜 수직 평 점 을 실현 할 수 있 습 니까?

<div "h-nav">
  <nav "container navbar navbar-default" role="navigation">
    <div "row">
      <div "navbar-header df-jcsbc">
        <a "navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="img/test8-1/logo6.png" "">
        </a>
        <button type="button" " navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
          <span "sr-only">    </span>
          <span "icon-bar"></span>
          <span "icon-bar"></span>
          <span "icon-bar"></span>
        </button>
      </div>
      <div "collapse navbar-collapse" id="navbar-collapse">
        <ul id="h-cell-1" "nav navbar-nav lsno navbar-right">
          <li ""><a href="test9-1.html" rel="external nofollow" >  </a></li>
          <li ""><a href="test9-3.html" rel="external nofollow" ><span "dib">  </span></a></li>
          <li ""><a href="test9-2.html" rel="external nofollow" rel="external nofollow" ><span "dib pat">  </span></a></li>
          <li ""><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span "dib pat">  </span></a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

이런 생각 을 가지 고 나 는 다음 과 같은 속성 을 설정 했다.

#h-cell-1 a{
  display:inline-block;
  height:97px;
  margin-left:32px;
  font-size:17.8px;
  text-decoration: none;color:white;
}

이 를 위해 어떻게 수직 거 중 을 실현 합 니까?
첫 번 째 로 생각 나 는 게 포지션 포 지 셔 닝 이에 요.
a 하이퍼링크 에 비해 position 를 실현 하려 면 span 상 자 를 도입 해 야 합 니 다.

<li ""><a href="test9-2.html" rel="external nofollow" rel="external nofollow" ><span "dib pat">  </span></a></li>

그리고 증가

#h-cell-1 li{height:97px;}
#h-cell-1 a{
  display:inline-block;
  position:relative;
  width:40px;
  height:97px;
  margin-left:32px;
  border-bottom:2px solid #20B176;
  font-size:17.8px;
  text-decoration: none;color:white;
}
#h-cell-1 a span{width:40px;}

수직 거 중 을 실현 할 수 있 습 니 다!
그러나 또 다른 문 제 는 갤 럭 시 5 의 작은 화면 에서 드 롭 다운 메뉴 의 li 간격 이 너무 커서 아름 답지 않다 는 것 이다.

또 어 떡 하지?
이 건 28 일 밤 에 방법 이 생각 났 어 요.영감 도 다른 친구 들 의 일 보 를 봤 다.그들 은 언론 조 회 를 언급 했다.
네,언론 조회 가 무엇 입 니까?바 이 두 를 건의 하 다.여기 소개 안 해 요.
언론 조회 맞 죠?

@media only screen and (max-width: 700px) {
#h-cell-1 li{height:auto;}
#h-cell-1 a{height:20px;width:100%;margin:0;padding:0;overflow:hidden;}
#h-cell-1 a span{height:auto;}
}

완벽 하 다
근 데 문제 가 있 잖 아!

아이콘 과 단 추 는 원래 수직 으로 가운데 가 아 닌 데!그럼 이 건 어 떡 해!

<div "navbar-header df-jcsbc">
  <a "navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <img src="img/test8-1/logo6.png" "">
  </a>
  <button type="button" " navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
    <span "sr-only">    </span>
    <span "icon-bar"></span>
    <span "icon-bar"></span>
    <span "icon-bar"></span>
  </button>
</div>

다 네 이 버 헤드 박스 에 있 잖 아 요.
그럼 플 렉 스 양 끝 을 맞 춰 서 수직 으로 할 수 없 나 요?
시험 해 보다
하나 더 넣 었 어 요.

.df-jcsbc{display:flex;justify-content: space-between;align-items: center;} 

근 데 효과 가 안 좋 잖 아!전체적으로 보면.navbar-brand 와 navbra-toggle 은 수직 거 중 을 실현 했다.

그럼 어 떡 하지?
저 는 그냥 할 게 요.

.navbar-header{position: relative;height:97px;}
.navbar-brand{
padding:0;

  }
.navbar-header img{position:absolute;
  left:20px;}
.navbar-header button{position:absolute;
  margin:0;
  right:20px;}

padding 과 margin 은 그들 로 하여 금 자 리 를 양보 하 게 했다.
그리고 포 지 셔 닝 을 통 해 좌우 거 리 를 조금 맞 췄 습 니 다.
마지막 으로 수직 거 중 을 실현 할 수 있다.
내일 과 오늘 계획 한 일:(큰 아기 사형 에 따라 UI 자체 검사:먼저 글씨체 의 크기,색깔,여백,포 지 셔 닝 등 문 제 를 대조 한 다음 에 서로 다른 해상도 에서 구조 가 어 지 럽 고 어 울 리 지 않 는 지 등 문 제 를 확인한다.테스트 10 을 하 겠 습 니 다.)
총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 BootStrap 네 비게 이 션 바 문제 기록 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!