使用Bootstrap将下拉列表向右对齐

要将下拉列表向右对齐,请在.dropdown-menu中添加类.pull-right。您可以尝试运行以下代码以使下拉列表与右侧对齐

示例

<!DOCTYPE html>

<html>

   <head>

      <title>Bootstrap Example</title>

      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">

      <script src = "/scripts/jquery.min.js"></script>

      <script src = "/bootstrap/js/bootstrap.min.js"></script>

   </head>

   <body>

      <div class = "dropdown">

         <button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">

            Cars

            <span class = "caret"></span>

         </button>

         <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dropdownMenu1">

            <li role = "presentation">

               <a role = "menuitem" tabindex = "-1" href = "#">BMW</a>

            </li>

            <li role = "presentation">

               <a role = "menuitem" tabindex = "-1" href = "#">Audi</a>

            </li>

            <li role = "presentation">

               <a role = "menuitem" tabindex = "-1" href = "#">

                  Hyundai

               </a>

            </li>

            <li role = "presentation">

               <a role = "menuitem" tabindex = "-1" href = "#">

                  Mitsubishi

               </a>

            </li>

            <li role = "presentation">

               <a role = "menuitem" tabindex = "-1" href = "#">

                  Nissan

               </a>

            </li>

         </ul>

      </div>

   </body>

</html>

以上是 使用Bootstrap将下拉列表向右对齐 的全部内容, 来源链接: utcz.com/z/343469.html

回到顶部