Question

我想实现此功能：

这是我到目前为止的一个小提琴：https://jsfiddle.net/vvevq2c3/

以下是我没有运气的代码：

ATTEMPT 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>

ATTEMPT 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>

ATTEMPT 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();

Answer 1

你可以使用Bootstrap example.com/myprofile尝试这样的事情，这样菜单UL的浮动就会留在更大的屏幕上......

http://codeply.com/go/QYaBcXNX7J

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

Answer 2

这可能会帮助您更接近您尝试完成的任务。

＆＃13;

.navbar-custom {
  border-bottom: none;
}
.navbar-custom .navbar-nav > li > a,
.navbar-header a.navbar-brand {
  color: #009cde;
}
.navbar-custom .navbar-nav .open .dropdown-menu .dropdown-header {
  color: #009cde;
}
.navbar-custom .menu-large {
  position: static;
}
.navbar-custom .megamenu {
  padding: 20px 0px;
  width: 100%;
}
.navbar-custom .megamenu > li > ul {
  padding: 0;
  margin: 0;
  text-align: center;
}
.navbar-custom .megamenu > li > ul:not(:last-child) {
  border-right: 1px solid #fff;
}
.navbar-custom .megamenu > li > ul > li {
  list-style: none;
  display: block;
}
.navbar-custom .megamenu > li > ul > li > a {
  display: inline-block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #fff;
  white-space: normal;
}
.navbar-custom .megamenu> li ul > li > a:hover,
.navbar-custom .megamenu> li ul > li > a:focus {
  text-decoration: none;
  color: #009cde;
  background: #fff;
  width: 100%;
}
.navbar-custom .nav > li.dropdown.open .dropdown-menu {
  background: #009cde;
}
.navbar-custom .caret-up {
  width: 0;
  height: 0;
  border-left: 4px solid rgba(0, 0, 0, 0);
  border-right: 4px solid rgba(0, 0, 0, 0);
  border-bottom: 4px solid;
  display: inline-block;
  margin-left: 2px;
  vertical-align: middle;
}
.navbar-custom .navbar-toggle .icon-bar {
  background: #266080;
}
@media (max-width: 768px) {
  .navbar-custom .megamenu {
    margin-left: 0;
    margin-right: 0;
  }
  .navbar-custom .megamenu > li > ul > li > a {
    padding: 6px 20px;
    margin-bottom: 3px;
    width: 100%;
  }
  .navbar-custom .megamenu > li > ul:not(:last-child) {
    border-right: none;
  }
  .navbar-custom .megamenu > li > ul {
    border: none;
    margin: 10px auto;
    text-align: left;
    border-bottom: 1px solid #fff;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-custom navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#">Brand</a>

    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a>

        </li>
        <li class="dropdown menu-large ">	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Things <span class="caret"></span></a>

          <ul class="dropdown-menu megamenu">
            <li class="col-sm-12 ">
              <ul class="col-sm-4">
                <li><a href="#">Action</a>

                </li>
                <li><a href="#">Another action</a>

                </li>
                <li><a href="#">Something else here</a>

                </li>
              </ul>
              <ul class="col-sm-4">
                <li><a href="#">Action</a>

                </li>
                <li><a href="#">Another action</a>

                </li>
                <li><a href="#">Something else here</a>

                </li>
              </ul>
              <ul class="col-sm-4">
                <li><a href="#">Action</a>

                </li>
                <li><a href="#">Another action</a>

                </li>
                <li><a href="#">Something else here</a>

                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>
<div class="well">
  <h1>Stuff</h1>

</div>

＆＃13;

Bootstrap - 将下拉列表内的内容与它们之间的垂直分隔符水平对齐

2 个答案: