부트 스트랩 4 | 사용자 지정 탐색 모음의 항목으로 같은 줄에 검색 상자를 유지할 수 없습니다.

부트 스트랩 4의 표를 사용하여 사용자 지정 navbar를 만들었습니다. 이 탐색 표시 줄은 두 부분으로 나뉩니다. 왼쪽 부분에는 탐색 표시 줄 항목이 있고 오른쪽 부분에는 검색 창이 있습니다. 문제는 검색 창이 내 탐색 막대의 오른쪽 부분에 머 무르지 않는다는 것입니다. 항상 항법 항목 (왼쪽 부분) 아래로 이동합니다.부트 스트랩 4 | 사용자 지정 탐색 모음의 항목으로 같은 줄에 검색 상자를 유지할 수 없습니다.

.custom-navbar-buttons p { 
 
    display: inline; 
 
    color: black; 
 
    margin-right: 0.4rem; 
 
} 
 

 
.custom-navbar-buttons { 
 
    padding-top: 0.4rem; 
 
    padding-bottom: 0.4rem; 
 
}

<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="custom-navbar col-12 bg-success"> 
 
     <div class="custom-navbar-buttons col-8"> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
     </div> 
 
     <div class="custom-navbar-search col-4"> 
 
      <input type="text" name="search" placeholder="search this site"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

가 어떻게 제대로 네비게이션 바의 항목과 같은 줄에 검색 창을 배치 할 : 여기

내 HTML & CSS 코드?

P.S .: "입력"주위에 태그가 없으므로 시도했기 때문에 두 방법 모두 작동하지 않으므로 마지막 시도 이후 코드가 변경되지 않았습니다.

P.P .: 나는 내 자신의 질문을 게시하기 전에 Google과 Stackoverflow를 검색했습니다. 그곳에서 제안 된 대답들 중 어느 것도 나에게 도움이되지 못했습니다. 대부분의 사람들은 navbar가 너무 많은 항목을 가지고 있으므로 검색 창에 맞지 않아 다음 줄로 이동한다고 제안합니다. 그러나 내 탐색 막대에 2 개의 항목 만 사용해도 시도했기 때문에 바보 같다고 생각합니다.

출처

2017-09-22 Dream

이게 원하는가요? 당신이 오른쪽으로 당겨 검색 창을 갖고 싶어

, 추가

class="float-right"

.custom-navbar-buttons p { 
 
    display: inline; 
 
    color: black; 
 
    margin-right: 0.4rem; 
 
} 
 

 
.custom-navbar-buttons { 
 
    padding-top: 0.4rem; 
 
    padding-bottom: 0.4rem; 
 
}

<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="custom-navbar col-12 bg-success"> 
 
     <div class="custom-navbar-buttons col-8"> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
     
 
      <input type="text" name="search" placeholder="search this site"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

출처

2017-09-22 12:00:44 Granny

안녕! 나는 그것을 오른쪽에서 원한다. 그래서 두 번째 열에서 navbar를 분리하여 두 번째 열이 검색 창을 유지하고 항목을 보유하고있는 첫 번째 열에서 멀리 떨어져 있도록 할 수 있습니다. – Dream

@Dream 나는 도움이되는 나의 awnser 희망을 편집했다. – Granny

@Dream 나는 부트 스트랩 파일이 당신의 질문에 있지 않은 것을 테스트 할 수 없기 때문에 나는 다른 질문에 의지해야만 제대로 잡아 당길 수있다. [이것 좀 봐] (https://stackoverflow.com/questions/42442323/bootstrap-4-alpha-6-col-align-right) – Granny

가 검색 상자가 모두 있기 때문에 당신의 연결의 오른쪽 부분에 머물하지 않습니다 custom-navbar-buttons와 custom-navbar-search는 블럭 레벨 요소입니다. 그래서 그들은 둘 다 custom-navbar 인 부모 div의 전체 너비를 차지하면서 서로 위에 정렬하는 경향이 있습니다.

둘 다 인라인으로 만들어야합니다.

.custom-navbar-buttons p { 
 
    display: inline; 
 
    color: black; 
 
    margin-right: 0.4rem; 
 
} 
 

 
.custom-navbar-buttons { 
 
    padding-top: 0.4rem; 
 
    padding-bottom: 0.4rem; 
 
    display:inline-block; 
 
} 
 

 
.custom-navbar-search { 
 
    display: inline-block; 
 
}

<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="custom-navbar col-12 bg-success"> 
 
     <div class="custom-navbar-buttons col-8"> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
     </div> 
 
     <div class="custom-navbar-search col-4"> 
 
      <input type="text" name="search" placeholder="search this site"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

는

또는 당신은 단순히 당신에게 당신의 네비게이션 바보다 효율적으로 제어 할 것 인 flexbox를 사용할 수 있습니다.

.custom-navbar { 
 
    display:flex; 
 
    flex-flow: row nowrap; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
} 
 
    
 
.custom-navbar-buttons p { 
 
    display: inline; 
 
    color: black; 
 
    margin-right: 0.4rem; 
 
} 
 

 
.custom-navbar-buttons { 
 
    padding-top: 0.4rem; 
 
    padding-bottom: 0.4rem; 
 
}

<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="custom-navbar col-12 bg-success"> 
 
     <div class="custom-navbar-buttons col-8"> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
     </div> 
 
     <div class="custom-navbar-search col-4"> 
 
      <input type="text" name="search" placeholder="search this site"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

출처

2017-09-22 12:15:52 slumbergeist

이것은 또한 효과적인 방법입니다. 누군가가 첫 번째 것을 사용하고 싶지 않거나 사용하지 않으려는 경우,이 것을 사용하십시오. 감사. – Dream

부트 스트랩 4 | 사용자 지정 탐색 모음의 항목으로 같은 줄에 검색 상자를 유지할 수 없습니다.

답변

관련 문제