html - 在 Bootstrap 的下拉菜单右侧插入图像

Question

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

打开导航栏下拉菜单后，我需要一个选项列表，以及位于列表右侧的图像。此图像需要与列表具有相同的高度，就像下图一样(葡萄牙语，但易于理解)。

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

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

我怎样才能实现这个解决方案？

<div id="navbar" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav top-elements">
                <li id="dropdown-produtos" class="dropdown">
                    <a href="#" class="dropdown-toggle text-uppercase top-text" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Nossos Produtos<span class="caret top-caret"></span></a>
<!-- div was here --> <ul class="dropdown-menu dropdown-menu-produtos">
                        <li class="dropdown-item-active">
                            <a href="#" class="dropdown-item-description">texto1</a>
                            <ul class="dropdown-menu img-dropdown">
                                 <img src="assets/img.png"> 
                            </ul>
                        </li>
                        <li class="dropdown-item">
                            <a href="#" class="dropdown-item-description">texto2</a>
                        </li>
                        <li class="dropdown-item"><a href="#" class="dropdown-item-description">texto3</a></li>
                        <li class="dropdown-item"><a href="#" class="dropdown-item-description">texto4</a></li>
                        <li class="dropdown-item"><a href="#" class="dropdown-item-description">texto5</a></li>
                    </ul>
                </li>
            </ul>
</div>

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>

基本上，我正在做的是在 Boostrap 中默认出现的下拉元素内创建一个全宽的 div。在此全宽行中，我创建了两列，其中包含 Bootstrap col-md-6 类(您也可以使用 col-lg 或 col-sm 或 col-xs 执行此操作)在此列中，我通常添加我的内容。

我在列 2 中创建了一个名为“drop-image”的类；使用这个类修改里面的img。

希望对您有所帮助!

顺便说一句，不要忘记设置下拉菜单的样式(在示例中，我将其标记为名为 another-class 的类)，以便定义位置和宽度。