Twitter 부트스트랩 드롭다운이 화면 밖으로 바뀝니다.

Twitter 부트스트랩 드롭다운이 화면 밖으로 바뀝니다.

트위터 부트스트랩 드롭다운 메뉴를 구현하고 싶은데, 제 코드는 다음과 같습니다.

<span class="dropdown"> 
<a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" ><img class="left" src="/static/img/topmenu_preferences.png" /><b class="caret"></b></a>
<ul class="dropdown-menu">
  <li><a href="#">a</a></li>
  <li><a href="#">b</a></li>
  <li><a href="#">c</a></li>
  <li class="divider"></li>
  <li><a href="#">d</a></li>
</ul>

드롭다운이 잘 작동하고 드롭다운이 화면 오른쪽 가장자리 옆에 있으며 드롭다운 토글을 클릭하면 목록이 화면 밖으로 나타납니다.화면에 표시되는 것과 같습니다.

어떻게 고치죠?

덧셈.pull-right로.ul.dropdown-menu할 것입니다

감가 상각 통지:부트스트랩 v3.1.0 시점에서.pull-right드롭다운 메뉴에서는 더 이상 사용되지 않습니다.메뉴를 오른쪽 정렬하려면.dropdown-menu-right.

감가상각 통지 2: 부트스트랩 v5 시점에서,.dropdown-menu-right사용되지 않습니다.부트스트랩 v5의 경우 를 사용합니다.

부트스트랩 v3.1.0 이후 추가.pull-right드롭다운 메뉴에서 더 이상 사용되지 않습니다. A..dropdown-menu-right에 추가되어야 함.ul.dropdown-menu대신에. 문서.

부트스트랩 4의 경우 추가dropdown-menu-right효과가 있습니다. 여기 작동하는 예시가 있습니다.

http://codeply.com/go/w2MJngNkDQ

오직 CSS만이 HTML을 수정할 필요가 없는 해결책은

li.dropdown:last-child .dropdown-menu {
  right: 0;
  left: auto;
}

권장 클래스를 항상 추가할 수 없는 동적으로 생성된 메뉴에 특히 유용합니다.dropdown-menu-right끝까지

수업을 이용하시면 됩니다..dropdown-pull-right다음 CSS와 함께:

.dropdown-pull-right {
  float: right !important;
  right: 0;
  left: auto;
}

.dropdown-pull-right>.dropdown-menu {
  right: 0;
  left: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>


<div class="dropdown dropdown-pull-right btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
  Open Dropdown
  <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

부트스트랩 4에서는 .dropleft를 사용할 수 있습니다.

다음으로 변경하기만 하면 됩니다.

<span class="dropleft">

아니면

드롭다운 메뉴에 .lg-menu-{lg,med,sm,lg}-right를 추가합니다.

<div class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="dropdown03">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>

float-*-right부트스트랩4용

*= xs,sm,md,lg

SO 레벨이 너무 낮아서 댓글을 남길 수는 없지만, 부모 컨테이너가 이렇게 "overflow:hidden"으로 설정되어 있는지 확인했습니다(또한 위치가 설정되어 있는지 확인).

<div style="overflow:hidden;position:relative">
    <span class="dropdown"> 
    <a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" ><img class="left" src="/static/img/topmenu_preferences.png" /><b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">a</a></li>
      <li><a href="#">b</a></li>
      <li><a href="#">c</a></li>
      <li class="divider"></li>
      <li><a href="#">d</a></li>
    </ul>
</div>

부트스트랩 5를 사용하는 경우 설명서에 따르면 다음과 같습니다.

오른쪽으로 이동:상위 요소에 .dropend를 추가하여 요소 오른쪽에 있는 드롭다운 메뉴를 트리거합니다.

<div class="btn-group dropend">
 <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
  Dropright
 </button>
 <ul class="dropdown-menu">
  <!-- Dropdown menu links -->
 </ul>
</div>

최근 이 문제가 발생하여 ngbDropdown에 display="dynamic"을 추가하여 해결했습니다(Angular 12, ngBootstrap 10 및 Bootstrap 4 사용).

<div class="row">
  <div class="col">
    <div ngbDropdown display="dynamic" class="d-inline-block dropdown-menu-right">
      <button class="btn btn-outline-primary" id="navbarDropdownForm" ngbDropdownToggle>Sign in</button>
      <div ngbDropdownMenu aria-labelledby="navbarDropdownForm">
        <form class="px-4 py-3">
          <div class="form-group">
            <label for="navbarDropdownFormEmail">Email address</label>
            <input type="email" class="form-control" id="navbarDropdownFormEmail" placeholder="email@example.com"
              autocomplete="username">
          </div>
          <div class="form-group">
            <label for="navbarDropdownFormPassword">Password</label>
            <input type="password" class="form-control" id="navbarDropdownFormPassword" placeholder="Password"
              autocomplete="current-password">
          </div>
          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="dropdownCheck">
            <label class="form-check-label" for="dropdownCheck">
              Remember me
            </label>
          </div>
          <button type="submit" class="btn btn-primary">Sign in</button>
        </form>
        <div class="dropdown-divider"></div>
        <button ngbDropdownItem>New around here? Sign up</button>
        <button ngbDropdownItem>Forgot password?</button>
      </div>
    </div>
  </div>
</div>

언급URL : https://stackoverflow.com/questions/13806802/twitter-bootstrap-dropdown-goes-outside-the-screen