Question

有以下html


<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, shrink-to-fit=no">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./css.css">

<body>
    <div class="main-product">
        <div class="dropdown">
            <a class="btn dropdown-toggle fa fa-cog option-placement mt-1" href="#" role="button" id="dropdownMenuLink"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            </a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                <a class="dropdown-item " href="#">Slet</a>
                <a class="dropdown-item" href="#">Ændre</a>
            </div>
        </div>

        <div class="image-wrap">
            <figure>
                <img
                    src="some_url">
            </figure>
        </div>
        <div class="bottom-wrap">
        </div>
    </div>

</body>

</html>

我正在尝试减少下拉菜单的宽度，因为它太宽了。

我可以毫无问题地增加它（见下文）但如果我试图缩小它，什么也不会发生


*{
  box-sizing: border-box;
}

html{
  font-size: 62.5%
}

body{
    background-color: rgb(235, 212, 183);
}

.main-product{
  height: 33%;
  width: 33%;
  background-color: #fff;
  border: 0.1rem solid rgb(141, 141, 141);
  position: relative;


}

.main-product:hover {
  -webkit-box-shadow: 0 4px 15px rgba(153, 153, 153, 0.3);
  box-shadow: 0 4px 15px rgba(129, 129, 129, 0.3);
  -webkit-transition: .3s;
  transition: .3s
}

.image-wrap{
  max-width: 100%;
  max-height: 75%;
  margin:2rem
}

.fa-cog.option-placement{
  top: -2px;
  right: 0px;
  position: absolute;
  color:#3b3b3b;
}

.dropdown-menu{
  max-width: 2px; /* wont work*/
  width: 2px; /* wont work*/

  width: 10000px; /*works fine*/
  
}

bootstrap4 下拉菜单宽度不会缩小（但会扩大）

0 个答案: