Question

截至撰写本文时，最新的Boostrap 4和popper.js已从CDN加载。

问题

我的下拉代码：

<!-- This loops through the paginated posts -->
{% for post in paginator.posts %}
  <h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
  <p class="author">
    <span class="date">{{ post.date }}</span>
  </p>
  <div class="content">
    {{ post.content }}
  </div>
{% endfor %}

<!-- Pagination links -->
<div class="pagination">
  {% if paginator.previous_page %}
    <a href="{{ paginator.previous_page_path }}" class="previous">Previous</a>
  {% else %}
    <span class="previous">Previous</span>
  {% endif %}
  <span class="page_number ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
  {% if paginator.next_page %}
    <a href="{{ paginator.next_page_path }}" class="next">Next</a>
  {% else %}
    <span class="next ">Next</span>
  {% endif %}
</div>

我将它定位在<div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">This dropdown's menu is right-aligned</button> <div class="dropdown-menu dropdown-menu-right"> <button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Something else here</button> </div> </div>内并且正确刷新：

<nav class="navbar">

问题在于，当您点击“欢迎”时，下拉菜单会超出屏幕的右边缘，尽管上面有下拉菜单右侧类。

建议的解决方案here不起作用（{margin：0}无效）。

问题

如何确保下拉菜单不会超出屏幕的右边缘？

谢谢！

Answer 1

我也没有那个。但是，我正在使用的解决方法到目前为止解决了所有问题：

$this->db->update(.......)

Answer 2

这是一个相当原始但完全可行的解决方案。

.dropdown-menu-right{
    left: -85px;
}

编辑：我将它放在媒体查询中，以便下拉菜单不会在移动设备上查看。

@media screen and (min-width: 991px) {
  .dropdown-menu-right{
    left: -85px;
  }
}

Answer 3

这篇文章中的答案对我没有帮助。我通过放置placement =“ bottom-right”来解决它。

<div ngbDropdown class="d-inline-block float-right" placement="bottom-right">
    <button class="btn btn-secondary dropleft" id="grade-dropdown" ngbDropdownToggle>
         Button
    </button>
    <div ngbDropdownMenu class="dropdown-menu">
        ...
    </div>
</div>

Bootstrap 4：当在nav.navbar中时，下拉菜单没有右对齐

3 个答案: