javascript - 如何在 Bootstrap 导航栏中排列图像和文本的底部？

Question

我有一个相当基本的 Bootstrap 导航栏，如下面的代码所示。

我在这里关心的部分是 Logo unified_brand.png 和 Contact 链接。我想以某种方式排列品牌形象和联系文本链接的底部。

是否可以通过编程方式实现？我一直在用填充和边距弄乱像素，它成功了，但感觉应该有更好的答案？

.navbar-brand {
    display: inline-block;
    float: none;
    font-size: 18px;
    height: 100%;
    padding: 0;
    vertical-align: middle;
}

#navBarMain {
    border-top: 5px solid #ff5c39;
    border-bottom: 2px solid black;
    padding-bottom: 10px;
    background-color: white;
    padding-top: 8px;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
<nav class="navbar navbar-default" id="navBarMain">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <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="#" class="navbar-brand">
            <img style="" src="~/images/unified_brand.png" alt="Company Logo">
        </a>
    </div>

    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
        </ul>


        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>  

Answer 1

小技巧，像 charm 一样工作，在你想要对齐的元素之前放置一个 inline-block。为此，父标签必须具有定义的高度。

#navBarMain {
    border-top: 5px solid #ff5c39;
    border-bottom: 2px solid black;
    padding-bottom: 10px;
    background-color: white;
    padding-top: 8px;
}

.small-trick{
  width: 0 ;
  height: 100%;
  display: inline-block;
  vertical-align: bottom;;
}

.navbar-header{
  height: 37pt;
}
 .navbar-brand {
    display: inline-block;
    float: none;
    font-size: 18px;
    height: auto;
    padding: 0;
    vertical-align: bottom;
}
}



<nav class="navbar navbar-default" id="navBarMain">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <div class="small-trick" ></div>
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <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="#" class="navbar-brand">
            <img style="" src="~/images/unified_brand.png" alt="Company Logo">
        </a>
    </div>

    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
        </ul>


        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>