Question

大家好，所以我有一个问题，我的导航栏左侧有我的标识，右侧是我的导航。现在，当我缩小屏幕时，我试图让图像看起来更小，以便导航文本和图像不会相互重叠。所以基本上是一个响应式设计。但由于某种原因，它似乎根本不起作用，

我已经使用了class="img-fluid使用了boostrap所使用的<div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <div class="logo"><img class="img-responsive" src="https://www.martialartsschoolsdirectory.com/logos/profile/checkmat-logo-burbank-ca-184.png"></div> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="#">NAVBARA</a></li> <li><a href="#">NAVBARA</a></li> <li><a href="#">NAVBARA</a></li> <li><a href="#">d</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">NAVBARA</a> <ul class="dropdown-menu"> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> </ul> </li> <li><a href="#">9</a></li> <li><a href="#">11</a></li> <li><a href="#">12</a></li> </ul> </div> </div>但它似乎在徽标上完全没有用，所以对此问题的任何帮助都会很棒

Fiidle Link：Here

我在导航栏上使用了浮动，也许那会弄乱它？但是我再也不确定如何让图像重新定位并随着页面缩小而变得更小

P.S正如你可以在小提琴中看到的那样，当窗口变得非常小时，图像实际上只会开始收缩，几乎少于移动版本

HTML：

.navbar-nav>li>a {
    line-height: 6px;
}

.navbar-nav {
    float: right;
    margin-top: -15px;
}
.navbar {
  padding-top: 53px;
  font-size: 13px;
  text-transform: uppercase;



}

.navbar-default {
    background-color: transparent;
    border-top: 0px solid rgba(0, 0, 0, 0.5);
    border-bottom: 0px solid rgba(0, 0, 0, 0.5);
    border-left: 0px solid rgba(0, 0, 0, 0.5);
    border-right: 0px solid rgba(0, 0, 0, 0.5);
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
    height: 87px;
}

.navbar-default .navbar-nav>li>a {
    color: #ffffff;
}

.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus {
      background-color: #F8BD23;
      text-decoration: none;
       color: #ffffff;
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
    }

    .navbar-nav > li{
  padding-left:30px;

}

body {

  background-color: black;
  }

CSS：

Sub Food()
Dim first As Variant
Dim last As Integer
Dim days As Integer
Dim month As Range
Dim total As Double
first = ActiveCell.Column
days = InputBox("Days in the month?")
last = first + days
Set month.Value = Range(Cells(first, 4), Cells(last, 4))
total.Value = WorksheetFunction.Sum(month)
Worksheets(1).Cells(1, 13).Value = total
End Sub

Answer 1

.logo img {width：100px;}

否则尝试
在img标签内添加width =“100”

Answer 2

要缩小它，你必须使它成为内联块，并且可能在img标签上使用以下内容：

style="display: inline-block; height: 40px; margin-top: 40px"

您可以设置所需的任何高度和宽度

Boostrap img reposive，在导航栏中不会变小

2 个答案: