bootstrap 4下拉列表未右对齐
在Bootstrap 4中，下拉列表默认是左对齐的。如果想要将下拉列表右对齐，可以通过自定义样式来实现。
首先，在HTML中添加一个自定义的class，例如"dropdown-right"，然后使用以下CSS代码来实现右对齐：
.dropdown-right .dropdown-menu {
right: 0;
left: auto;
}接下来，在需要右对齐的下拉列表中添加这个自定义class，例如：
<div class="dropdown dropdown-right">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
下拉列表
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">选项1</a>
<a class="dropdown-item" href="#">选项2</a>
<a class="dropdown-item" href="#">选项3</a>
</div>
</div>这样，下拉列表就会右对齐显示了。
关于Bootstrap 4的更多信息和使用方法，你可以参考腾讯云的Bootstrap 4产品介绍页面：Bootstrap 4产品介绍
相关·内容
我正面临着很多困难 1)下拉菜单中的插入符号到右手边下拉菜单的末尾。 2当下拉菜单展开时，我无法将项目向左对齐。 添加了一个标记来解释这个问题 这里给出了完整的代码。<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.cssPepperoni&
浏览 15提问于2019-01-08得票数 0
回答已采纳
3回答
如何在bootstrap下拉列表中右对齐下拉切换？这是我的代码和一个jsfiddle，你可以看到向下的箭头在文本旁边，我希望它在右边。button class="btn dropdown-toggle btn-block text-left" style="background-color: white; border-color:#dee4ed
浏览 1提问于2017-10-05得票数 5
回答已采纳
我正在使用bootstrap，试图创建一个类似于电子商务的顶级导航栏的Facebook。我向最右上角的链接添加了一个下拉列表，因此链接" account“显示了与帐户相关的操作的下拉列表。下拉菜单很好地右对齐，但菜单面板顶部的小箭头是左对齐的，指向导航栏中的前一个链接。这里的代码是：
对此有什么解决方法/解决方法/替代方案吗？
浏览 1提问于2012-04-19得票数 4
回答已采纳
1回答
右对齐单个元素
、、、、
我想要将下拉列表中的单个元素与Bootstrap 5右对齐。通常我会使用“justify content-end”，但这不会这样做。 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/dist/umd
浏览 27提问于2021-10-13得票数 0
回答已采纳
1回答
我在ng-bootstrap (Angular 4+ Bootstrap 4)中创建了一个导航栏，其中一些项目位于左侧(一个下拉列表)，另一些项目位于右侧(非下拉列表)。我已经能够与下面的代码左右对齐，但右对齐的项目更高，颜色也不同，这表明一些CSS被正确应用。<button class="dropdown-item">item3</button>
浏览 5提问于2017-08-08得票数 1
回答已采纳
我有一个用Bootstrap 4构建的网页，在我的网页上，我有一个导航栏。该导航栏有一个用户可以单击的设置图标。设置图标在导航栏中右对齐。单击时，将显示设置窗体。
如此中所示，将显示设置窗体。但是，窗体与按钮不是右对齐的。相反，中的设置似乎从左到右悬停。此外，中的设置内容并没有像我预期的那样均匀地分布在两列中。我做错了什么？dropdown-toggle py-0 mb-0 float-right" aria-expanded="false" aria-haspopup="true&
浏览 2提问于2017-11-30得票数 1
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.m
浏览 0提问于2018-07-11得票数 0
1回答
我使用pull-right将顶部导航栏向右对齐，但当我调整窗口大小并看到响应式菜单时，列表项也是右对齐的，看起来是捆绑在一起的。如何将常规导航栏菜单向右对齐，而将响应菜单项向左对齐？我的下载中没有bootstrap-responsive.css。仅限bootstrap.css和bootstrap.min.css。
谢谢
浏览 6提问于2013-04-27得票数 0
我正在尝试手动格式化Tableau整数，以便列表可以正确对齐数字。没有LPAD()函数。您可以在下拉列表中看到数字列未对齐的位置。我有一个这样的列表: 23一些文本103一些文本。
浏览 0提问于2019-12-31得票数 0
我使用的是HTML5和Bootstrap框架。在页面的顶部，将有一个包含下拉菜单的条形，我想将这个下拉菜单对齐到右边。
浏览 5提问于2016-07-22得票数 0
回答已采纳
2回答
我正在使用的Bootstrap仪表板，并尝试像典型的Boostrap那样向表格单元格添加一个下拉列表： <button type="button"</li> <a href="#">Link2</a> </ul>
浏览 22提问于2017-08-24得票数 0
我想向导航栏添加一个下拉列表，但要确保当浏览器调整到较窄的宽度时，该下拉列表在导航栏中仍然可见，并且不会包含在导航折叠中。我调用bootstrap-cliumse.js和bootstrap-dropdown.js。
浏览 2提问于2012-02-22得票数 7
1回答
下拉式中心菜单
、、
我有一个引导下拉列表，我想要实现的是如何将下拉菜单中心设置到按钮的中心？现在，它正在根据区域上可用的空间与按钮的左或右对齐。提前谢谢。
@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous&
浏览 5提问于2022-06-19得票数 0
回答已采纳
我正在尝试使用Bootstrap 4框架在一个表元素中创建一个下拉列表。检查器显示WP-Database中的内容已正确加载，但它们仍呈灰色显示。即使我点击按钮，这也不会改变。 ? 因此，基本上，下拉选项不会显示/不会触发。我哪里错了？
浏览 35提问于2019-10-06得票数 0
回答已采纳
我在PHP站点上使用Twitter Bootstrap (v2.1.1)。我在php脚本中动态生成导航栏，因为如果用户登录或退出网站，导航栏将具有不同的内容。我想将最后一个下拉菜单对齐到屏幕的右侧，但到目前为止还不能。这是一个显示简化版本的jsFiddle：
<li class="dropdown pull-right">
<a hre
浏览 1提问于2012-09-17得票数 35
回答已采纳
我正在使用引导选择器，但每当我点击下拉列表时，它都会显示一些错误，并且我无法执行数据实时搜索，即使我更改了引导版本，但对我不起作用 链接： <link rel="stylesheet" type="text>app-assets/css/bootstrap.css"> // Bootstrap v4.0.0-alpha.4
<link rel="stylesheet" hre
浏览 22提问于2021-01-06得票数 2
如上所述，我想学习如何使用“dropdown - As”(图像中的绿色圆圈)创建下拉菜单。我看过推特的源码，似乎他们有<li class="dropdown-caret"></li>格式，但我不能用Bootstrap生成它。这是不是包含在引导程序中，还是我做错了？此外，如何将下拉菜单左对齐而不是默认右对齐？如图所示，下拉菜单左对齐。
浏览 0提问于2013-05-24得票数 11
回答已采纳
关于如何让第一列左对齐，第二列右对齐，并且下拉菜单仍然出现在正确的位置，有什么建议吗？
下面是一个引导程序：
浏览 0提问于2016-11-16得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
