个人中心
gpt4 book ai didi

css - Bootstrap - 水平对齐下拉列表中的内容，并在它们之间使用垂直分隔符

转载 作者：太空宇宙 更新时间：2023-11-04 11:29:16 25 4
gpt4 key购买 nike

我想实现这个功能:

enter image description here .

这是我目前拥有的一小部分:https://jsfiddle.net/vvevq2c3/

下面是我试过的代码，没有任何运气:

尝试 1

<ul class="nav navbar-nav">
   <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Personal 
         <span class="caret"></span>
      </a>

      <ul class="dropdown-menu">
         <div class="row">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
            <li><a href="#">Separated link</a></li>
          </div>
       </ul>
    </li>
</ul>

尝试 2

 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
       <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Personal 
             <span class="caret"></span>
          </a>

          <div class="row">
              <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                  <li><a href="#">Separated link</a></li>
               </ul>
           </div>
        </li>
    </ul>

尝试 3 

<div class="row">
   <ul class="dropdown-menu">
      <div class="span6">
         <div class="mycontent-left">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
         </div>
      </div>

       <div class="span6">
          <div class="mycontent-right">
             <li><a href="#">Separated link</a></li>
             <li><a href="#">One more separated link</a></li>
             <li><a href="#">Separated link</a></li>
          </div>
        </div>
      </div>
    </ul>

有没有人知道如何实现这个功能？

更新

在答案的帮助下，我能够水平对齐下拉菜单内容。这是修改后的代码:

<!doctype html>
<html>
  <head>
    <title> Paypal </title>

    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel = "stylesheet" href = "../css/paypal.css">

    <script src = "https://code.jquery.com/jquery-2.1.4.min.js"> </script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
  </head>

  <body>
    <nav class="navbar navbar-default">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Paypal </a>
    </div>
    <div class="container-fluid">
        <ul class="nav navbar-nav">
            <li class="dropdown megamenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Personal <span class="caret"></span></a>
                  <div class="dropdown-menu row">
                    <ul class="list-unstyled col-lg-12 col-sm-12" role="menu">
                      <ul class="col-lg-4 col-sm-6 list-unstyled">
                        <li ><a href="#">Pay on eBay</a></li>
                        <li><a href="#">Pay on websites</a></li>
                      </ul>

                      <ul class="col-lg-4 col-sm-6 list-unstyled">
                        <li><a href="#">Pay in apps</a></li>
                        <li><a href="#">Pay in stores</a></li>
                      </ul>

                      <ul class="col-lg-4 col-sm-6 list-unstyled">
                        <li><a href="#">More ways to use us</a></li>
                      </ul>
                    </ul>
              </div>
          </li>
      </ul>

      <ul class="nav navbar-nav">
            <li class="dropdown megamenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Business <span class="caret"></span></a>
                  <div class="dropdown-menu row">
                    <ul class="list-unstyled col-lg-12 col-sm-12" role="menu">
                      <ul class="col-lg-4 col-sm-6 list-unstyled">
                        <li ><a href="#">All business solutions</a></li>
                        <li><a href="#">Get paid on your website </a></li>
                      </ul>

                      <ul class="col-lg-4 col-sm-6 list-unstyled">
                        <li><a href="#">Get oaid on the go  </a></li>
                        <li><a href="#">Get paid in your store </a></li>
                      </ul>

                      <ul class="col-lg-4 col-sm-6 list-unstyled">
                        <li><a href="#">Get paid in your app  </a></li>
                        <li><a href="#">Email an invoice </a></li>
                      </ul>
                    </ul>
              </div>
          </li>
      </ul>

      <ul class="nav navbar-nav">
            <li class="dropdown megamenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Send <span class="caret"></span></a>
                <div class="dropdown-menu row" class="col-lg-6">
                  <div class="form-group">
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Please enter your email or number">
                  </div>

                    <div class="input-group">
                      <input type="text" class="form-control" aria-label="...">
                      <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                        <ul class="dropdown-menu dropdown-menu-right">
                          <li><a href="#">Action</a></li>
                          <li><a href="#">Another action</a></li>
                          <li><a href="#">Something else here</a></li>
                          <li role="separator" class="divider"></li>
                          <li><a href="#">Separated link</a></li>
                        </ul>
                      </div><!-- /btn-group -->
                    </div><!-- /input-group -->
                  </div><!-- /.col-lg-6 -->
</nav>

    <script src = "../javascript/Paypal.js"> </script>
  </body>
</html>

paypal.css

@media screen and (min-width: 768px) {

  .megamenu ul {
     padding-bottom:15px;
  }

  .megamenu ul:not(:last-of-type) {
     border-right:1px solid #ccc;
  }

  .megamenu > .dropdown-menu {
     min-width:800px;
  } 

  .megamenu ul {
     padding-bottom:15px;
  }

}

ul {
    margin-top: 0.5%;
}

#exampleInputEmail1 {
    width : 50%;
    margin-left: 3%;
    margin-top: 2%;
}

.input-group {
    width : 50%;
    margin-left: 3%;
    margin-bottom: 2%;
}

paypal.js

var paypal = (function ($) {
    'use strict';

    return {
        stopPaypal : function () {
            $('.dropdown-menu').on('click', function (e) {
                e.stopPropagation();
            });
        }
    };

}(jQuery));

paypal.stopPaypal();

最佳答案

您可以使用 Bootstrap col-* 尝试这样的操作，这样 UL 菜单会在较大的屏幕上 float ...

http://codeply.com/go/QYaBcXNX7J

此外，您的 ATTEMPT 3 使用的 span3 不是 Bootstrap 3 类。

关于css - Bootstrap - 水平对齐下拉列表中的内容，并在它们之间使用垂直分隔符，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32147840/

25 4 0
文章推荐： c++ - 抓取 tcp 数据包的序列号
文章推荐： php - Crontab 无法正常运行
文章推荐： linux - 命令在 linux 终端中有效，但在 shell 脚本中无效
文章推荐： asp.net-mvc - 支持 MVC3 和 EF 的 Mono 有多远？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com