时间戳

首页 > 解决方案 > bootstrap btn-group not uniform height

bootstrap-4 - bootstrap btn-group not uniform height

问题描述

I have a bootstrap btn-default, which the last one must contain a dropdown, how can I make all of them the same size?

The last one contains only a DIV shouldn't become so big

.btn {
  width: 25%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<div id="header-content" style="width:100%" class="btn-group  btn-group-toggle ">

  <a href="Home.aspx" class="btn btn-default redBack a">
    <i class="fas fa-home"></i><br /> Home
  </a>
  <a href="Categorie.aspx" class="btn btn-default redBack a">
    <i class="fa fa-book-open"></i><br /> Menù
  </a>
  <a href="Carrello.aspx" class="btn btn-default redBack a">
    <i class="fa fa-shopping-cart"></i><br /> Carrello
    <asp:Label runat="server" ID="lblNumCarrello"></asp:Label>
  </a>

  <div class="dropdown btn btn-default redBack ">
    <a class="dropdown-toggle btn lblBiancoMenu a redBack" data-toggle="dropdown" href="#">
      <i class="far fa-address-card"></i>
      <br />Profilo
    </a>

    <ul class="dropdown-menu a redBack" role="menu" aria-labelledby="dLabel">
      <li><a href="registrazione.aspx?Menu=1" class="redBack ">Profilo </a></li>
      <li><a href="Login.aspx" class="redBack ">Login </a></li>
    </ul>
  </div>

</div>

标签： bootstrap-4

解决方案

因为您在分区内有锚标记，所以分区的填充和锚的边框增加了高度。如果您将 div 设置为没有填充，并且将锚设置为没有边框（并填充整个宽度），那么您应该得到您想要的。

.btn {
     width:25%;
}
.menu-div {
    padding: 0 !important;
}
.menu-dropdown {
    border: 0 !important;
    width: 100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
   

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  
  
  
<div  id="header-content" style="width:100%"  class="btn-group  btn-group-toggle " >

                  <a  href="Home.aspx"  class="btn btn-default redBack a">
                      <i class="fas fa-home"></i><br />
                    Home
                 </a>
                 <a  href="Categorie.aspx"  class="btn btn-default redBack a">
                     <i class="fa fa-book-open"></i><br />
                    Menù
                  </a>
                 <a  href="Carrello.aspx"  class="btn btn-default redBack a">
                     <i class="fa fa-shopping-cart"></i><br />
                Carrello <asp:Label runat="server" ID="lblNumCarrello" ></asp:Label>
                  </a>


            <div class="dropdown btn btn-default redBack menu-div"  >
                  <a class="dropdown-toggle btn lblBiancoMenu a redBack menu-dropdown" data-toggle="dropdown" href="#" >                    
                        <i class="far fa-address-card"></i>
                       <br />Profilo
                  </a>
                                
                      <ul class="dropdown-menu a redBack" role="menu" aria-labelledby="dLabel">
                      <li><a  href="registrazione.aspx?Menu=1"  class="redBack ">Profilo </a></li>
                      <li><a  href="Login.aspx"  class="redBack ">Login </a></li>
                  </ul>
                </div>



                </div>

我添加了几个新样式来显示结果。您可以以任何适合您的设置的方式应用样式，尽管您可能必须在样式上使用 !important 以防止 Bootstrap 的 btn 样式覆盖您的样式。

推荐阅读