navi

navi

关注
发信
关注(28)粉丝(399)

带有可变和固定宽度按钮的Bootstrap导航栏？

本文介绍了带有可变和固定宽度按钮的Bootstrap导航栏？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图制作一个带有Bootstrap的导航栏，左侧有一个品牌徽标，中间有几个可变宽度链接，右侧有一些固定宽度的按钮。我希望所有的东西都放在一行上，而宽度可变的按钮恰好适合任何空间。



请参阅：

2个固定宽度的按钮应该在右边可变宽度链接

我不需要Bootstrap内置的导航栏折叠行为，所以在我的导航栏定义中不需要（我在某些屏幕上实现了我自己的自定义折叠）



非常感谢您的帮助！



代码：

 < nav class =navbar navbar-inverse navbar-fixed-toprole =navigation> 
< div class =navbar-header> 
< a class =navbar-brandhref =＃>品牌< / a> 
 
< ul class =nav nav-justified> 
< li>< a href =>可变宽度连结1< / a>< / li> 
< li>< a href =>可变宽度连结2< / a>< / li> 
< / ul> 
< / div> 
 
< div> <！ -  class =navbar-header?? - > 
< a class =btn btn-xs btn-default>固定宽度按钮< / a> 
< div class =btn-group> 
< button type =buttonclass =btn btn-xs btn-default dropdown-toggledata-toggle =dropdownaria-expanded =false> FW drop down& nbsp;&  < span class =caret>< / span>< / button> 
< ul class =dropdown-menurole =menu> 
< li>< a href =＃>选单项目1< / a>< / li> 
< li>< a href =＃>菜单项目2< / a>< / li> 
< / ul> 
< / div> 
< / div> 
< / nav>


解决方案

以下是一种方法：您可以创建一个div在你的按钮的 navbar-nav 部分的外部/之后，并使该部分符合 navbar 。



*我放弃了可折叠的功能，因为我的图片中您将有一些移动导航，它们会有类似的元素可以解决。



请参阅示例

>

body，html {margin-top：75px;}。navbar.navbar-custom {list-style：none;背景：＃444; line-height：60px;保证金：0; height：60px;}。navbar.navbar-custom .navi {display：table;宽度：100％; list-style：none; text-align：center;}。navbar.navbar-custom .navi> li {display：table-cell; cursor：pointer;}。navbar.navbar-custom .navi> li> {text-align：center;文字修饰：无;颜色：#fff;}。navbar.navbar-custom .logo-brand {margin-left：15px;颜色：#fff; navbar.navbar-custom .btn-nav {text-align：right;}。navbar.navbar-custom .btn-nav .btn.btn-black {height：50px; text-decoration：none;}。 border-radius：0;背景：＃444;颜色：#fff; border：none;概要：无; navbar-custom .btn-group .dropdown-menu，.navbar-custom .btn-group .dropdown-menu：hover，.navbar-custom .btn-group .dropdown-menu：focus { left：auto;正确：0; border：none;背景：＃444; border-radius：0;}。navbar-custom .btn-group .dropdown-menu> li> a {color：#fff;}。navbar-custom .btn-group .dropdown-menu> li> a：hover {background：＃222;}。no-gutter> [class * ='col-'] {padding-right：0; padding-left：0;}

< script src = https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script><script src =https://maxcdn.bootstrapcdn.com/ bootstrap / 3.3.5 / js / bootstrap.min.js>< / script>< link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css rel =stylesheet/>< nav class =navbar navbar-custom navbar-fixed-top> < div class =container-fluid> < div class =row no-gutter> < div class =col-xs-2>< a class =logo-brandhref =＃>徽标品牌< / a> < / DIV> < div class =col-xs-8> < ul class =navi> < li>< a href =＃>连结1< / a> < /锂> < li>< a href =＃>连结2< / a> < /锂> < / UL> < / DIV> < div class =col-xs-2> < div class =btn-nav> < div class =btn-grouprole =grouparia-label =...> < button type =buttonclass =btn btn-black> 1< / button> < div class =btn-grouprole =group> < button type =buttonclass =btn btn-black dropdown-toggledata-toggle =dropdownaria-haspopup =truearia-expanded =false> 2< span class =caret >< /跨度> < /按钮> < ul class =dropdown-menu> < li>< a href =＃>按钮连结1< / a> < /锂> < li>< a href =＃>按钮连结1< / a> < /锂> < / UL> < / DIV> < / DIV> < / DIV> < / DIV> < / DIV> < / div>< / nav>< div class =container> < p>与流行的观点相反，Lorem Ipsum不仅仅是随机文本。它源于公元前45年的一段古典拉丁文学，已有2000多年历史。弗吉尼亚汉普顿悉尼学院的拉丁教授理查德麦克林托克查阅了Lorem Ipsum段落中较为晦涩的拉丁词，consectetur之一，并且通过古典文学中的这个词的引用，发现了这个毫无疑问的来源。 Lorem Ipsum来自Cicero的de Finibus Bonorum et Malorum（极端的善恶）的第1.10.32和1.10.33节，写于公元前45年。本书是关于伦理学的论文，在文艺复兴时期非常流行。 Lorem Ipsum的第一行Lorem ipsum dolor sit amet ..来自1.10.32节的一行。与流行的观点相反，Lorem Ipsum不仅仅是随机文本。它源于公元前45年的一段古典拉丁文学，已有2000多年历史。弗吉尼亚汉普顿悉尼学院的拉丁教授理查德麦克林托克查阅了Lorem Ipsum段落中较为晦涩的拉丁词，consectetur之一，并且通过古典文学中的这个词的引用，发现了这个毫无疑问的来源。 Lorem Ipsum来自Cicero的de Finibus Bonorum et Malorum（极端的善恶）的第1.10.32和1.10.33节，写于公元前45年。本书是关于伦理学的论文，在文艺复兴时期非常流行。 Lorem Ipsum的第一行Lorem ipsum dolor sit amet ..来自1.10.32节的一行。与流行的观点相反，Lorem Ipsum不仅仅是随机文本。它源于公元前45年的一段古典拉丁文学，已有2000多年历史。弗吉尼亚汉普顿悉尼学院的拉丁教授理查德麦克林托克查阅了Lorem Ipsum段落中较为晦涩的拉丁词，consectetur之一，并且通过古典文学中的这个词的引用，发现了这个毫无疑问的来源。 Lorem Ipsum来自Cicero的de Finibus Bonorum et Malorum（极端的善恶）的第1.10.32和1.10.33节，写于公元前45年。本书是关于伦理学的论文，在文艺复兴时期非常流行。 Lorem Ipsum的第一行Lorem ipsum dolor sit amet ..来自1.10.32节的一行。与流行的观点相反，Lorem Ipsum不仅仅是随机文本。它源于公元前45年的一段古典拉丁文学，已有2000多年历史。弗吉尼亚汉普顿悉尼学院的拉丁教授理查德麦克林托克查阅了Lorem Ipsum段落中较为晦涩的拉丁词，consectetur之一，并且通过古典文学中的这个词的引用，发现了这个毫无疑问的来源。 Lorem Ipsum来自Cicero的de Finibus Bonorum et Malorum（极端的善恶）的第1.10.32和1.10.33节，写于公元前45年。本书是关于伦理学的论文，在文艺复兴时期非常流行。 Lorem Ipsum的第一行Lorem ipsum dolor sit amet ..来自1.10.32节的一行。与流行的观点相反，Lorem Ipsum不仅仅是随机文本。它源于公元前45年的一段古典拉丁文学，已有2000多年历史。弗吉尼亚汉普顿悉尼学院的拉丁教授理查德麦克林托克查阅了Lorem Ipsum段落中较为晦涩的拉丁词，consectetur之一，并且通过古典文学中的这个词的引用，发现了这个毫无疑问的来源。 Lorem Ipsum来自Cicero的de Finibus Bonorum et Malorum（极端的善恶）的第1.10.32和1.10.33节，写于公元前45年。本书是关于伦理学的论文，在文艺复兴时期非常流行。 Lorem Ipsum的第一行Lorem ipsum dolor sit amet ..来自1.10.32节的一行。与流行的观点相反，Lorem Ipsum不仅仅是随机文本。它源于公元前45年的一段古典拉丁文学，已有2000多年历史。弗吉尼亚汉普顿悉尼学院的拉丁教授理查德麦克林托克查阅了Lorem Ipsum段落中较为晦涩的拉丁词，consectetur之一，并且通过古典文学中的这个词的引用，发现了这个毫无疑问的来源。 Lorem Ipsum来自Cicero的de Finibus Bonorum et Malorum（极端的善恶）的第1.10.32和1.10.33节，写于公元前45年。本书是关于伦理学的论文，在文艺复兴时期非常流行。 Lorem Ipsum的第一行Lorem ipsum dolor sit amet ..来自1.10.32节的一行。与流行的观点相反，Lorem Ipsum不仅仅是随机文本。它源于公元前45年的一段古典拉丁文学，已有2000多年历史。弗吉尼亚汉普顿悉尼学院的拉丁教授理查德麦克林托克查阅了Lorem Ipsum段落中较为晦涩的拉丁词，consectetur之一，并且通过古典文学中的这个词的引用，发现了这个毫无疑问的来源。 Lorem Ipsum来自Cicero的de Finibus Bonorum et Malorum（极端的善恶）的第1.10.32和1.10.33节，写于公元前45年。本书是关于伦理学的论文，在文艺复兴时期非常流行。 < / p>< / div>


I'm trying to make a navbar with Bootstrap that has a brand logo on the left, a couple of variable width links in the middle, and some fixed width buttons on the right. I want everything on one line, and the variable width buttons to just fit in whatever space is available.

See here: https://jsfiddle.net/wfu6yxqd/

the 2 fixed width buttons should be to the right of the variable width links

I don't need Bootstrap's built in navbar collapse behaviour so not needed in my navbar definition (I am implementing my own custom collapse at certain screensizes)

Many thanks for any help!

Code:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
    <a class="navbar-brand" href="#">Brand</a>

    <ul class="nav nav-justified">
        <li><a href="">Variable width link 1</a></li>
        <li><a href="">Variable width link 2</a></li>
    </ul>
</div>

<div> <!-- class="navbar-header" ?? -->
    <a class="btn btn-xs btn-default">Fixed width button</a>
    <div class="btn-group">
        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">FW drop down&nbsp;&nbsp;<span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Menu item 1</a></li>
            <li><a href="#">Menu item 2</a></li>
        </ul>
    </div>
</div>
</nav>
解决方案

Here's one way to go: you can create a div outside/after the navbar-nav section for your buttons and conform that section to the navbar.

*I left the collapsible function in place since I image you'll have something for mobile navigation that will have similar elements to work around.

See example

body,
html {
  margin-top: 75px;
}
.navbar.navbar-custom {
  list-style: none;
  background: #444;
  line-height: 60px;
  margin: 0;
  height: 60px;
}
.navbar.navbar-custom .navi {
  display: table;
  width: 100%;
  list-style: none;
  text-align: center;
}
.navbar.navbar-custom .navi > li {
  display: table-cell;
  cursor: pointer;
}
.navbar.navbar-custom .navi > li > a {
  text-align: center;
  text-decoration: none;
  color: #fff;
}
.navbar.navbar-custom .logo-brand {
  margin-left: 15px;
  color: #fff;
  text-decoration: none;
}
.navbar.navbar-custom .btn-nav {
  text-align: right;
}
.navbar.navbar-custom .btn-nav .btn.btn-black {
  height: 50px;
  border-radius: 0;
  background: #444;
  color: #fff;
  border: none;
  outline: none;
  box-shadow: none;
}
.navbar-custom .btn-group .dropdown-menu,
.navbar-custom .btn-group .dropdown-menu:hover,
.navbar-custom .btn-group .dropdown-menu:focus {
  left: auto;
  right: 0;
  border: none;
  background: #444;
  border-radius: 0;
}
.navbar-custom .btn-group .dropdown-menu > li > a {
  color: #fff;
}
.navbar-custom .btn-group .dropdown-menu > li > a:hover {
  background: #222;
}
.no-gutter >[class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-custom navbar-fixed-top">
  <div class="container-fluid">
    <div class="row no-gutter">
      <div class="col-xs-2"><a class="logo-brand" href="#">Logo Brand</a>

      </div>
      <div class="col-xs-8">
        <ul class="navi">
          <li><a href="#">Link 1</a>

          </li>
          <li><a href="#">Link 2</a>

          </li>
        </ul>
      </div>
      <div class="col-xs-2">
        <div class="btn-nav">
          <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-black">1</button>
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-black dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">2 <span class="caret"></span>

              </button>
              <ul class="dropdown-menu">
                <li><a href="#">Button link 1</a>

                </li>
                <li><a href="#">Button link 1</a>

                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>
<div class="container">
  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
    one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
    et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
    1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,
    looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de
    Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
    a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College
    in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
    of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
    from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
    College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32
    and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit
    amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor
    at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from
    sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem
    ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a
    Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem
    Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem
    Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard
    McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable
    source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first
    line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
</div>

这篇关于带有可变和固定宽度按钮的Bootstrap导航栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-02 11:58
Powered by LMLPHP ©2024 navi 0.037461