Question

这是我第一次尝试创建引导程序菜单，而且我遇到了以下问题。我在类似问题上尝试了不同的解决方案，但没有成功☹

折叠时我想要文本：这是按钮“button1”旁边的按钮。我尝试过使用内联样式，但是我无法将2个元素保留在一行上。
如果我设法在同一行显示它们，如何在折叠时使文本元素与下面的下拉元素具有相同的左边距？我不知道为什么文字＆amp;按钮元素与它们下面的下拉列表没有相同的左边距。

以下是我的代码的副本：https://jsfiddle.net/b512zesq/

谢谢！

＆＃13;

.navbar {
  min-height: 80px;
  background: #ee4035;
  border-width: 0px;
  border-radius: 0px;
  color: blue;
}

.navbar a {
  color: white!important;
}

.navbar-brand {
  padding: 0 15px;
  height: 80px;
  line-height: 80px;
  color: white;
}

.navbar-toggle {
  /* (80px - button height 34px) / 2 = 23px */
  margin-top: 23px;
  padding: 9px 10px !important;
}

.navbar-btn {
  /* (80px - button height 34px) / 2 = 23px */
  margin-top: 18px;
  margin-right: 30px;
  padding: 9px 9;
  background: #f37736;
  border-width: 0px;
  height: 35px;
  width: 150px;
}

.navbar-text {
  margin-top: 28px;
  color: white;
}

.nav.navbar-nav.navbar-right li a {
  color: white;
}

.dropdown-menu {
  background: #ee4035;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
  background-color: #d6392f;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  color: #ffffff;
}

.navbar-default .navbar-nav>li>.dropdown-menu {
  background-color: #ee4035;
}

.navbar-default .navbar-nav>li>.dropdown-menu>li>a {
  color: #ffffff;
}

.bar-nav>li>.dropdown-menu>li>a:hover,
.navbar-default .navbar-nav>li>.dropdown-menu>li>a:focus {
  color: #ffffff;
  background-color: #d6392f;
}

.navbar-default .navbar-nav>li>.dropdown-menu>li>.divider {
  background-color: blue;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
  color: #ffffff;
  background-color: #d6392f;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
  color: #ffffff;
  background-color: #d6392f;
}

.navbar-default .navbar-toggle {
  border-color: #d6392f;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #d6392f;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #ffffff;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ffffff;
}

.navbar-default .navbar-link {
  color: #ffffff;
}

.navbar-default .navbar-link:hover {
  color: #ffffff;
}


/*RESPONSIVE*************************************************/

@media (min-width: 768px) {
  .navbar-nav>li>a {
    /* (80px - line-height of 27px) / 2 = 26.5px */
    padding-top: 26.5px;
    padding-bottom: 26.5px;
    line-height: 27px;
  }
}


/**END OF RESPONSIVE********************************************/

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.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"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
      <a class="navbar-brand" href="#">logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">

      <ul class="nav navbar-nav navbar-right">
        <li class="inline"><span class="navbar-text" style="color:white"><strong>this is a button</strong></span></li>
        <li><a class="btn btn-danger navbar-btn" href="{$rlBase}/add-listing.html" role="button">button 1</a></li>
        <form class="navbar-form navbar-left" style="padding:0px; border-top-width:0px;"></form>


        <li class="dropdown">
          <a class="dropdown-toggle" id="user-navbar" data-toggle="dropdown" href="{$rlBase}/login.html"><span class="glyphicon glyphicon-user"></span> USERNAME<span class="caret"></a>

    </div>
  </div>
</nav>

＆＃13;

Answer 1

您可以使用<ul>为您的父display: inline-flex设置样式，并将列表项与您的下拉列表放在一起。但是，这可能会导致兼容性问题。
只需为列表项添加15px的左侧填充。下拉链接的默认填充左侧为15px（您可以在第23行的navs.less文件中找到它）。

在折叠时对齐同一行上的bootstrap nav元素

1 个答案: