使Bootstrap下拉列表透明 [英] Making bootstrap dropdown transparent

问题描述

我需要使Bootstrap下拉列表透明.如何做到这一点.下面是html

I need to get the bootstrap dropdown transparent. How can this be achieved. Below is the html

<div id="mydiv" class="dropdown transparentbar" style="z-index:4">
       <button class="btn btn-default dropdown-toggle" type="button" id="mybyn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
         Drop mat
         <span class="caret"></span></button>
     <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 role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>          

CSS

     .transparentbar {
        background-repeat:no-repeat;
        cursor:pointer;
        outline:none;
        border:none;
        box-shadow:none; 
        background-image: none;

        background-color: transparent;
        background: transparent;
        border-color: transparent;

    }

你能帮忙吗?

推荐答案

目前尚不清楚哪个部分应该是透明的，所以我将假设它是不按钮，而是点击时显示的实际列表.

It's not clear which part is supposed to be transparent so I'm going to assume it's not the button but rather the actual list that appears on click.

背景颜色受此控制:

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff; /* here */
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

因此，我建议您在选择器中更具体一些，以免影响其他下拉菜单

#mydiv > .dropdown-menu {
    background:transparent;
}

该按钮由 btn-default 类

The button is controlled by the btn-default class

#mydiv > btn-default {
    background:transparent;
}

/* CSS used here will be applied after bootstrap.css */
body {
  background:pink !important;
}

#mydiv > .btn-default {
  background:transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>

<div id="mydiv" class="dropdown transparentbar" style="z-index:4">
  <button class="btn btn-default dropdown-toggle" type="button" id="mybyn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Drop mat
    <span class="caret"></span></button>
  <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 role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul> 
</div>

> 引导演示

这篇关于使Bootstrap下拉列表透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！