Question

我需要设置与标题相同的徽标高度。虽然我将徽标的高度设置为100％，但它不会占用标题的高度。我不知道如何将徽标的高度设置为标题高度。这是我的代码

app.css

body {
    font-family: 'Open Sans', sans-serif;
    border-top:none;
}

.navbar {


    margin-bottom: 0px;
    padding: 10px 15px;

}

.navbar img {

    width : 100%; 
    height : 100%;
}

母版页

您可以在标题元素

中看到徽标的引用

<header>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a  href="#"><img src="~/Images/NGSR-logo.jpg" /> </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Requests</a></li>
                    <li><a href="#">Activities</a></li>
                    <li><a href="#">Reports</a></li>
                    <li><a href="#">Admin</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Country <span class="caret"></span></a>
                        <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>
                    </li>
                    <li><a href="#">Save View</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

</header>

标题视图

Answer 1

尝试设置徽标图片的最大宽度：

.navbar-header img{
  max-width:280px;
}

然后将导航栏的填充设置为零：

.navbar{
  padding:0;
}

在我的例子中，我从谷歌中选择了一个随机徽标，但这应该会给你一般的想法！

在这里小提琴：https://jsfiddle.net/captain_theo/f1a5bda1/

徽标没有占据标题的全高

1 个答案: