如何在Bootstrap中控制我的徽标大小？

Question

＆＃13;

＆＃13;

.new-application-menu {
  background-color: #47484c;
  height: 100%;
  padding: 0px;
  z-index: 10;
  box-shadow: -1px 0px 2px #000000;
}

.new-application-menu ul {
  color: #fff;
  /* border: 1px solid white; */
}

.new-application-menu ul li {
  padding: 8px;
  border-bottom: 0.01px solid rgba(255, 255, 255, 0.2);
  background-color: #27A9E3;
}

.new-application-menu ul li p {
  font-size: 12px;
  padding: 5px;
}

.new-application-menu ul li i {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

＆＃13;

<div class="col-md-1 new-application-menu">
  <ul class="nav navbar-nav text-center">
    <li><img src="assets/Img/logo2.png" width="55" height="95"></li>
    <li> <i class="material-icons" style="font-size:36px">description</i>
      <p>بانک جامع اطلاعاتی</p>
    </li>
    <li> <i class="material-icons" style="font-size:36px">assessment</i>
      <p>نبض شهر</p>
    </li>

    <li> <i class="material-icons" style="font-size:36px">colorize</i>
      <p>آزمایشگاه شهری</p>
    </li>
    <li> <i class="material-icons" style="font-size:36px">remove_red_eye</i>
      <p>رصد طرح های توسعه ی شهری</p>
    </li>
    <li> <i class="material-icons" style="font-size:36px">location_city</i>
      <p>رصد پروژه های شهری</p>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

当我使用此代码并且我的列表功能的高度超过我的页面大小时，它会自动向我的页面添加滚动条，这会导致我的网格系统相互叠加。如何防止这种叠加？

Answer 1

您可以像我添加的.myLogo一样使用自定义类

.new-application-menu {
    background-color: #47484c;
    height: 100%;
    padding: 0px;
    z-index: 10;
    box-shadow: -1px 0px 2px #000000;
    
}
.new-application-menu ul
{
    color: #fff;
   /* border: 1px solid white; */
}
.new-application-menu ul li
{
        padding: 8px;
        border-bottom: 0.01px solid rgba(255,255,255,0.2);
        background-color: #27A9E3;

  
}
.new-application-menu ul li p
{
        font-size: 12px;
        padding: 5px;
        
        
  
}

.new-application-menu ul li i
{
        font-size: 12px;
        color: rgba(255,255,255,0.8);
        
  
}

.myLogo{ width:100px; height:100px;}

<div class="col-md-1 new-application-menu">
   <ul class="nav navbar-nav text-center">
                     <li><img src="assets/Img/logo2.png" width="55" height="95" class="myLogo"></li>
                     <li> <i class="material-icons" style="font-size:36px">description</i><p>بانک جامع اطلاعاتی</p></li>
                     <li> <i class="material-icons" style="font-size:36px">assessment</i>  <p>نبض شهر</p></li>
                     
                      <li> <i class="material-icons" style="font-size:36px">colorize</i><p>آزمایشگاه شهری</p> </li>
                      <li> <i class="material-icons" style="font-size:36px">remove_red_eye</i><p>رصد طرح های توسعه ی شهری</p> </li>
                      <li> <i class="material-icons" style="font-size:36px">location_city</i><p>رصد پروژه های شهری</p> </li>
                  </ul>
 </div>