如何防止 Dropdown 从屏幕溢出？

Question

请问？

我有这个问题

下拉菜单从屏幕溢出，最后我不知道如何防止它，我正在使用 Bootstrap，而且我没有为导航添加任何 CSS .导航菜单也不在 .container 或 container-fload div.

中

你知道避免这种丑陋效果的技巧吗？

这是导航代码

<!-- Inicio Nav -->
    <header th:fragment="header">
        <nav class="navbar navbar-expand-lg navbar-dark indigo darken-4 d-flex">
            <a class="navbar-brand" href="#"> <i class="fa fa-cubes fa-lg"
                aria-hidden="true"></i>
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse"
                data-target="#navbarNav" aria-controls="navbarNav"
                aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" th:href="@{/listar}">Clientes</a></li>
                </ul>

            <!--  Dropdown User Logged -->
                <ul class="navbar-nav ml-auto mr-5" sec:authorize="!isAuthenticated()">
                    <li class="nav-item">
                    <a class="nav-link" th:href="@{/login}">
                    Login
                    <i class="fas fa-sign-in-alt"></i>
                    </a>
                    </li>                   
                </ul>
                <!-- Dropdorn user Logged fin  -->          


                <!--  Dropdown User Logged -->
                <ul class="navbar-nav ml-auto mr-5" sec:authorize="isAuthenticated()">
                <li class="nav-item dropdown">
                    <!--  Trigger -->
                    <a class="nav-link dropdown-toggle" 
                    id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" 
                    aria-expanded="false">              
                    <span sec:authentication="name"></span>
                    </a>
                    <!--  Trigger FIN -->

                    <!--  DROP DOWN OPTIONS -->
                    <div class="dropdown-menu dropdown-primary"
                    aria-labelledby="navbarDropdownMenuLink">                                                   
                    <form th:action="@{/logout}" method="post" id="logoutForm" class="w-50">                    
                    <button type="submit" class="dropdown-item"
                    onclick="document.getElementById('logoutForm').submit();">
                    Cerrar Session
                    <i class="fas fa-power-off"></i>
                    </button>                   
                    </form>
                    </div>
                    <!--  DROP DOWN OPTIONS FIN-->                          
                </li>
                </ul>
                <!-- Dropdorn user Logged fin  -->

            </div>
        </nav>
    </header>
    <!-- Fin nav  -->

我想强调它是使用 thymeleaf 的项目的代码，但它不会影响 bootstrap 我认为

Css代码

/*estilos para ntificaciones*/
.z-index{
    position: absolute;
    z-index: 3000;
}

/*Estilos para botones*/
.btn-rounded{
border-radius: 200px 200px 200px 200px;
-moz-border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
border: 0px solid #000000;
}

.btn-indigo:hover {
    background: linear-gradient(108deg, rgba(253,29,115,1) 0%, rgba(91,58,180,1) 100%);
}

.btn-secondary:hover{
    background: linear-gradient(108deg, rgba(253,29,115,1) 0%, rgba(58,117,180,1) 100%);
}

.btn-light:hover{   
    background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
    }
.btn-danger:hover{  
    background: linear-gradient(108deg, rgba(253,29,115,1) 0%, rgba(180,58,58,1) 100%);
    }

.btn-deep-purple:hover{
    background: linear-gradient(108deg, rgba(253,29,115,1) 0%, rgba(180,58,58,1) 100%);
}

.btn-primary:hover{
    background: linear-gradient(108deg, rgba(253,29,115,1) 0%, rgba(180,58,58,1) 100%);
}

.btn-info:hover{
    background: linear-gradient(108deg, rgba(253,29,115,1) 0%, rgba(180,58,58,1) 100%);
}
/*-estilos de boton file upload*/   

.file-upload-btn:active {
  border: 0;
  transition: all .2s ease;
}

.file-upload-content {
  display: none;
  text-align: center;
}

.file-upload-input {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
  cursor: pointer;
}

.image-upload-wrap {
  margin-top: 20px;
  border: 4px dashed gray;
  position: relative;
}

.image-dropping,
.image-upload-wrap:hover {
  background-color:#9fa8da;
  border: 4px dashed #ffffff;
}

.image-title-wrap {
  padding: 0 15px 15px 15px;
  color: #222;
}

.drag-text {
  text-align: center;
}

.drag-text h3 {
  font-weight: 100;
  text-transform: uppercase;
  color: gray;
  padding: 60px 0;
}

.file-upload-image {
  max-height: 200px;
  max-width: 200px;
  margin: auto;
  padding: 20px;
}

.remove-image {
  width: 200px;
  margin: 0;
  color: #fff;
  background: #303f9f ;
  border: none;
  padding: 10px;
  border-radius: 4px; 
  transition: all .2s ease;
  outline: none;
  text-transform: uppercase;
  font-weight: 700;
}

.remove-image:hover {
  background: #ff1744;
  color: #ffffff;
  transition: all .2s ease;
  cursor: pointer;
}

.remove-image:active {
  border: 0;
  transition: all .2s ease;
}

/*Texto especial*/
.h5{
    font-family: "Lucida Console", Courier, monospace;
}

/*Estilos del login*/
svg{

    position: fixed;
    z-index: -1

}
.img-login{
position:fixed;
z-index:0;
height: 570px;
width: auto;
}

.margin-top-form{

}
.btd:hover{
    background: linear-gradient(108deg, rgba(253,29,115,1) 0%, rgba(91,58,180,1) 100%);
}
.margin-top-form{
    margin-top: 10%
}

.w-90{
    width: 90%;
}

Answer 1

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>

请将此添加到您的页眉部分并试一试。

Answer 2

添加 class 下拉菜单右侧它必须在 bootstrap 4 中工作

如何防止 Dropdown 从屏幕溢出？

How can I prevent a Dropdown from overflowing from the screen?

html

css

navigation

web-frontend

twitter-bootstrap