"연결"드롭 다운 상자와 입력 양식을 부트 스트랩에

그래서 아래 HTML이 있습니다. 검색 (오른쪽 상단)을 클릭하면 왼쪽 상단에 드롭 다운 상자가 나타납니다. 드롭 다운 상자가 검색 상자 아래에 제대로 놓여 있고 전체가 드롭 다운에 연결된 단추의 작동 방식처럼 작동하도록 이러한 항목을 "연결"하고 싶습니다."연결"드롭 다운 상자와 입력 양식을 부트 스트랩에

저는 웹 사용자가 아니므로 부트 스트랩을 처음 사용하는 경우를 "알지 못합니다"라는 점을 명심하십시오.

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
    <link rel="stylesheet" href="/static/css/style.css"> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script> 
    <script src="https://use.fontawesome.com/6e0448e881.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    </head> 

    <body> 
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
     <a class="navbar-brand" href="#">Navbar</a> 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
     </button> 

     <div class="collapse navbar-collapse"> 
     <ul class="navbar-nav mr-auto"> 
      <li class="nav-item"> 
      <a class="nav-link" href="#">Link</a> 
      </li> 
     </ul> 


     <form class="form-inline my-2 my-lg-0" method="get"> 
      <input name="q" id="qbox" data-toggle="dropdown" type="search" class="form-control" placeholder="Search" autofocus="autofocus" autocomplete="off"/> 
      <div id="search_results" class="dropdown-menu" role="menu"> 
      <div>a</div> 
      <div>b</div> 
      <div>c</div> 
      </div> 
     </form> 


     </div> 
    </nav> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
    </body> 
</html>

출처

2017-12-25 Kahr Kunne

드롭 다운 메뉴에 적용되는 클래스 (.dropdown-menu)를 재정의해야합니다. 당신의 CSS 구조 당신이 inital 문 뒤에 !important이 규칙을 호출 할 수 보이는 방법에 따라

.dropdown-menu{ 
    left: initial; 
}

: 당신의 CSS에서

출처

2017-12-25 19:46:23 Andreas

"연결"드롭 다운 상자와 입력 양식을 부트 스트랩에

답변

관련 문제