image background instead of button for dropdown

问题: I already have a dropdown with the following code: note: class='bg_r' is in CSS for the background image (url) globe <span class="bg_r"> Language: <...

问题:

I already have a dropdown with the following code:

note: class='bg_r' is in CSS for the background image (url) globe

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

The output for above code is as shown in figure 1 below:

enter image description here

Now, I'm doing similar to that(above figure) using bootstrap 4.But i'm not able to override the button style using background image.Instead of button type I replaced with anchor tag but of no use(its wrong method but i tried). Following is the code I tried so far:

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

The output for the code using bootstrap is as shown in figure 2 below:

enter image description here

How can I override button type with (background) image to get output similar to figure 1?

Thanks in advance.


回答1:

Add btn-link class to button

Additionally add these styles to center align it

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

or add these 2 classes d-inline-flex align-items-center to bg_r span

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

You can also use bg-transparent on the button that will remove the background-color from button, but will not remove the focus styles when you click on the button ! So preferably add btn-link class to it only.


回答2:

The above answer works, or you can also replace this line

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

by

<a href="" class="btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</a> 
  • 发表于 2018-07-11 18:03
  • 阅读 ( 244 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除