Question

我已经有一个带有以下代码的dropdown：

注意：class='bg_r'在CSS中表示背景图片（网址）地球

<span class="bg_r">     

    Language: <a id="Lang" href="#">DropUp▲</a>
</span>
                <div id="language_menu" class="lang_switch_panel">
                    <div class="lang_switch">
                        <ul>
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Action</a></li>

                        </ul>
                    </div>
                </div>

以上代码的输出如下图1所示：

现在，我正在使用bootstrap 4做类似的操作（上图）。但是我无法使用背景图片来覆盖按钮样式。我将按钮类型替换为anchor tag但没有用（它的错误方法，但我尝试过）。以下是到目前为止我尝试过的代码：

<span class="bg_r">
                 Language:
                 <button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropup
                  </button>
            </span>
             <!--<span class="bg_r">Language:
            <a type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropup
              </a>
            </span>-->
            <div class="dropdown-menu">
                <!-- Dropdown menu links -->
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Action</a>               
            </div>

使用引导程序的代码输出如下图2所示：

如何用（背景）图像覆盖按钮类型以获得类似于图1的输出？

谢谢。

Answer 1

将btn-link类添加到按钮

另外添加这些样式以使其居中对齐

.bg_r {
  background-color: aqua;
  display: inline-flex;
  align-items: center;
}

或将这两个类d-inline-flex align-items-center添加到bg_r跨度

.bg_r {
  background-color: aqua;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<span class="bg_r d-inline-flex align-items-center p-1">
             Language:
             <button class="btn btn-sm btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropup
              </button>
        </span>

<div class="dropdown-menu">
  <!-- Dropdown menu links -->
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Action</a>
</div>

您还可以在按钮上使用bg-transparent，该按钮将删除按钮的背景色，但单击按钮时将不删除焦点样式！因此最好只添加btn-link类。

Answer 2

以上答案有效，或者您也可以替换此行

<button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</button>

作者

<a href="" class="btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</a>

图片背景，而不是下拉按钮

2 个答案: