在Boostrap的下拉菜单右侧插入图像

Question

我正在使用Bootstrap在页面顶部创建一个导航栏，但我遇到了一些问题：

打开导航栏下拉列表后，我需要有一个选项列表，以及位于列表右侧的图像。此图像需要具有相同的列表高度，如下图所示（葡萄牙语，但易于理解）。

我在图像上实现了此设置固定的高度和宽度，但列表可以长大，不是一个很好的选择手动调整。

另一个解决方案是插入一个包含列表和图像的div，并将图像大小设置为100％，但是当我这样做时，下拉列表不再实现（我想我打破了Bootstrap的结构）用来切换下拉列表，我是对的吗？）。

如何实现此解决方案？

user_managed_groups

Answer 1

这应该有效：

  <ul class="nav navbar-nav">
       <li><a href="#">Elemento 1</a></li>
       <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">DropDown<span class="caret"></span></a>
           <ul class="dropdown-menu another-class">
               <!-- ROW -->
               <div class="col-md-12">
                   <!-- Column 1 -->
                   <div class="col-md-6">
                      <ul class="list-unstyled">
                         <li><a href="#">Texto 1</a></li>
                         <li><a href="#">Texto 2</a></li>
                         <li><a href="#">Texto 3</a></li>
                      </ul>
                    </div>
                    <!-- Column 2 -->
                    <div class="col-md-6">
                        <div class="drop-image">
                           <img src="./img/img.jpg" class="img-responsive" />
                        </div>
                    </div>
               </div>
           </ul>
       </li>
       <li><a href="#">Elemento 2</a></li>
       <li><a href="#">Elemento 3</a></li>
   </ul>

基本上我正在做的是在下拉元素中创建一个带有全宽度的div，它在Boostrap中是默认的。在这个全宽行中，我创建了两个带有bootstrap col-md-6类的列（你也可以使用col-lg或col-sm或col-xs来实现这一点）在这些列中我通常添加我的内容。

我在第2列创建了一个名为＆＃34; drop-image＆＃34;;使用这个类来修改里面的img。

希望它有所帮助！

顺便说一句，不要忘记设置下拉列表的样式（在示例中我用一个名为 another-class 的类标记它），因此您可以定义位置和宽度。

Answer 2

这可能会解决您的问题，它基于此插件Yamm3!。请参阅示例代码段。

如果由于链接文本的长度需要使下拉列更宽，请更改此CSS规则。 ＆GT;

.list-unstyled, .list-unstyled ul {
    min-width: 180px
}

＆＃13;

＆＃13;

body {
  padding-top: 60px;
  color: #666;
}
/* menu styes */

.list-unstyled,
.list-unstyled ul {
  min-width: 180px
}
.list-unstyled > li {
  padding-top: 10px;
}
.list-unstyled > li > a {
  color: #555;
  text-decoration: none;
}
.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
  position: static;
}
.yamm .container {
  position: relative;
}
.yamm .dropdown-menu {
  left: auto;
  background: #f5f5f5;
}
.yamm .yamm-content {
  padding: 0 30px 10px 30px;
}
.yamm .yamm-content .nav-title {
  margin-left: 15px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
  left: 0;
  right: 0;
}
@media (max-width: 767px) {
  .yamm-content .list-unstyled > li img {
    margin-top: -180px;
    float: right;
  }
}

＆＃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 yamm navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>

      </button><a href="#" class="navbar-brand">Grande Menu</a>

    </div>
    <div id="navbar-collapse-1" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <!-- Classic list -->
        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Nossos Produtos<b class="caret"></b></a>

          <ul class="dropdown-menu">
            <li>
              <!-- Content container to add padding -->
              <div class="yamm-content">
                <div class="row">
                  <h4 class="nav-title"><strong>A partida de um</strong></h4>

                  <ul class="col-sm-4 list-unstyled">
                    <li><a href="#">Vinculando um</a>

                    </li>
                    <li><a href="#">Ligando dois</a>

                    </li>
                    <li><a href="#">Ligação de três</a>

                    </li>
                    <li><a href="#">Quatro ligação</a>

                    </li>
                    <li><a href="#">Ligação cinco</a>

                    </li>
                    <li><a href="#">Seis ligação</a>

                    </li>
                  </ul>
                  <ul class="col-sm-2 list-unstyled">
                    <li>
                      <img src="http://placehold.it/150x150/ff0/fff">
                    </li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav">
        <!-- Classic list -->
        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Nossos Produtos Dois<b class="caret"></b></a>

          <ul class="dropdown-menu">
            <li>
              <!-- Content container to add padding -->
              <div class="yamm-content">
                <div class="row">
                  <h4 class="nav-title"><strong>A partida de um</strong></h4>

                  <ul class="col-sm-4 list-unstyled">
                    <li><a href="#">Vinculando um</a>

                    </li>
                    <li><a href="#">Ligando dois</a>

                    </li>
                    <li><a href="#">Ligação de três</a>

                    </li>
                    <li><a href="#">Quatro ligação</a>

                    </li>
                    <li><a href="#">Ligação cinco</a>

                    </li>
                    <li><a href="#">Seis ligação</a>

                    </li>
                  </ul>
                  <ul class="col-sm-2 list-unstyled">
                    <li>
                      <img src="http://placehold.it/150x150/ff0/fff">
                    </li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>
<div class="container">
  <div class="alert alert-warning">Olá</div>
</div>

＆＃13;

＆＃13;

＆＃13;