我将如何在引导导航栏中缩进无序列表，以便我可以首先放置导航栏品牌，然后是无序列表答案

【问题标题】：How would I indent a unordered list in a bootstrap navbar so I can put the navbar-brand first, and then the unordered list我将如何在引导导航栏中缩进无序列表，以便我可以首先放置导航栏品牌，然后是无序列表
【发布时间】：2022-01-23 04:35:44
【问题描述】：

我尝试使用填充、文本对齐中心、浮动和边距，但似乎没有任何效果，列表项都保持固定。和bootstrap的CSS或者JS有冲突吗？我对引导程序很陌生，对 CSS 和 HTML 也比较陌生，所以我可能遗漏了一些东西，但我似乎在这个问题上找不到其他任何东西。

这是我的代码（对于混乱的 cmets 感到抱歉）：

/*controls the style of the entire navbar, including border and background clr*/
.navbar.navbar-default {
  background-color: #D9D9D9;
  border-color: #143DAF;
  border-style: groove;
  border-width: 5px;
  text-align: center;
}
/*Controls the styles of the navbar brand, or the logo in the center*/
.navbar.navbar-default .navbar-brand {
  color: #292929;
}
/*IDK, come back later but apears to have something to do with navbar brand hover*/
.navbar.navbar-default .navbar-brand:hover,
.navbar.navbar-default .navbar-brand:focus {
  color: #ffffff;
  background-color: #ffffff;
}
.navbar .navbar-center > ul {
    padding-left: 30px;
    padding-right: 30px;
    text-align: center;
    align-content: center;
    float: right;
}
/*Again, IDK what this does, tho i think it is text, pottentially is being overwritten by the one below*/
.navbar.navbar-default .navbar-text {
  color: #292929;
  background-color: #000000;
}
/*will change the styles of all links within a list and a navbar, including the fb and ig logos*/
.navbar.navbar-default .navbar-nav > li > a {
  color: #292929;
}
/*Link styling for when you hover over them*/
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
  color: #6765eb;
}
/*Changes the color of the links when you hover over them when the active class is equiped*/
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
  color: #6765eb;
  background-color: #ffffff;
}
/*changes the color of the links when you hover over them with the active class*/
.navbar.navbar-default .navbar-nav > .open > a,
.navbar.navbar-default .navbar-nav > .open > a:hover,
.navbar.navbar-default .navbar-nav > .open > a:focus {
  color: #ffd4d4;
  background-color: #ffffff;
}
/*Hamburger Styling*/
.navbar.navbar-default .navbar-toggle {
  border-color: #D9D9D9;
}
.navbar.navbar-default .navbar-toggle:hover,
.navbar.navbar-default .navbar-toggle:focus {
  background-color: #D9D9D9;
}

.navbar.navbar-default .navbar-toggle .icon-bar {
  background-color: #292929;
}

.navbar.navbar-default .navbar-link {
  color: #292929;
}
/*HAMBURGER OVER*/
/*changes the color of the links when you hover over them*/
.navbar.navbar-default .navbar-link:hover {
  color: #ffd4d4;
}

/*Adjusts the position and aditional styles of the navbar brand (logo)*/
.navbar-brand {
  transform: translateX(-50%);
  left: 7%;
  position: absolute;
  padding: 0px;
}
/*Changes the style of the navbar, including the fonts*/
.nav.navbar-nav > li.navbar-center {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 11px;
}


.navbar-brand > img {
  height: 90%;
  width: auto;
}
/*Adjust padding and position of the nav*/
@media (min-width:768px) and (max-width:991px){
  .container.navbar-container {
     width:100%;
     padding:0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> My Website</title>
    <!--Gives access to ig fb pintrest & twitter--><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">
    <!---Bootstrap CSS & JS---->
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </head>
<body>
    <header>
        <div class="container navbar-container">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <!---"Hamburger" drop-down menu--->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>        
        <!-----Logo (right now its the settings wheel)----->
        <a class="navbar-brand" href="http://jh.com"><img class= "logo" src="https://cdn2.iconfinder.com/data/icons/social-productivity-line-art-2/128/settings-gear2-512.png"></a>
      </div>
      <!---The ul and links of the navbar--->
      <div id="navbar" class="navbar-collapse collapse">
        <!--The html links, navbar-left specifies that they will be on the left side of the bar, and is also used for txt styling-->
        <ul class="nav navbar-nav">
          <li class="navbar-center"><a href="index.html">HOME</a></li>
          <li class="navbar-center"><a href="#"> INFORMATION</a></li>
          <li class="navbar-center"><a href="#"> HISTORY </a></li>
          <li class="navbar-center"><a href="#"> ATTRACTIONS </a></li>
          <li class="navbar-center"><a href="#"> GALLERIES </a></li>
          <li class="navbar-center"><a href="#"> CONTACT US </a></li>
      </ul>
        <!--similar to above, except this is used for ig fb and twitter logos+links, navbar-right is in the opening <div> since it isn't needed for txt styling anymore-->
        <ul class="nav navbar-nav navbar-right">
          <li> <a href="https://www.instagram.com"><i class="fa fa-instagram"></i></a>
          <li> <a href="https://www.pinterest.com"><i class="fa fa-pinterest"></i></a>
          <li> <a href="https://www.facebook.com"><i class="fa fa-facebook"></i></a>
          <li> <a href="https://twitter.com"><i class="fa fa-twitter"></i></a>  
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>
</div>
</header>
</body>
</html>

【问题讨论】：

标签： html css bootstrap-4 navbar

【解决方案1】：

您提供的 html 无效。如果您查看.navbar-right，您还没有关闭任何列表元素。

我不确定你的工作是Bootstrap 4 还是Bootstrap 3...你的问题被标记为bootstrap-4，但你的问题代码和外部库似乎是bootstrap-3？

所以我下面的解决方案是基于最新的 Bootstrap 3.4.1。

内联 cmets 很棒...但我个人不会直接在 HTML 代码中编写 cmets，因为任何查看您的源代码的人可以阅读它们！像您这样的代码 cmets 只能用于未编译的 src 文件（js/css）和服务器端文件（php 等）。

好的，我们在下面使用 Bootstrap 3，所以 css 方法有点老派。没有flexbox css 用法（flexbox css 模型最早是在 Bootstrap 4 中引入的）。

我对您的 HTML 和 CSS 所做的更改...

添加了帮助 CSS 以显示您在当前视口中查看的引导断点。
清理并关闭所有 HTML 标记，使 HTML 代码有效。
将导航栏文本更改为普通标题并使用 css 将其变为大写（参见 css cmets）。
删除了所有不必要的容器 div 和 css 类。
添加了一些自定义 CSS 类和媒体查询来实现您想要的输出。
将Contact us 更改为Contact，这样您就可以将无缝断点从SM 更改为XS。
添加了一些 css tweeks 以在响应缩小视口时收紧导航栏/社交链接填充/字体大小。

这里也是一个 jsfiddle 版本...

https://jsfiddle.net/joshmoto/6xtjg4mz/

无论如何希望这会有所帮助...

/** 'XS' mode navbar ul margins **/
.nav.navbar-nav {
  margin: 5px -15px;
}

/** so navbar links text appear normal on google but uppercase on the website **/
.nav.navbar-nav:not(.navbar-social) > li > a {
  text-transform: uppercase;
}

/** margins in 'XS' mode and bigger socials icons at 28px **/
.nav.navbar-social {
  margin: 10px 0 10px -8px;
  overflow: hidden;
  font-size: 28px;
}

/** always float left social icons so they dont stack in 'XS' mode **/
.nav.navbar-social > li {
  float: left !important;
}

/** same left and right gaps between social icons **/
.nav.navbar-social > li > a {
  padding: 15px 8px !important;
}

/** screen size large 'SM' and up **/
@media (min-width: 768px) {

  /** 'SM' and up: navbar ul margin force 0 **/
  .nav.navbar-nav {
    margin: 0 !important;
  }
  
  /** 'SM' and up: navbar list links padding **/
  .nav.navbar-nav > li > a {
    padding: 15px 8px;
  }
  
  /** 'SM' and up: social list smaller icons at 20px **/
  .nav.navbar-social {
    font-size: 20px;
  }
  
}

/** screen size large 'MD' and up **/
@media (min-width: 992px) {

  /** 'MD' and up: navbar list links padding (default padding) **/
  .nav.navbar-nav > li > a {
    padding: 15px 15px;
  }
  
}


/** helper css below **/


/** helper breakpoint indicator screen size large 'XS' and up **/
body::before {
  text-transform: lowercase;
  position: fixed;
  z-index: 10000;
  background: red;
  font-family: 'Courier New', Courier, monospace;
  font-size: 50px;
  right: 0;
  bottom: 0;
  color: white;
  padding: 2px 20px;
  font-weight: bold;
  content: 'XS';
}

/** helper breakpoint indicator screen size large 'SM' and up **/
@media (min-width: 768px) {
  body::before {
    content: 'SM';
  }
}

/** helper breakpoint indicator screen size large 'MD' and up **/
@media (min-width: 992px) {
  body::before {
    content: 'MD';
  }
}

/** helper breakpoint indicator screen size large 'LG' and up **/
@media (min-width: 1200px) {
  body::before {
    content: 'LG';
  }
}

<!-- Fonts & Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<header>
  <nav class="navbar navbar-default">
    <div class="container">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand" href="http://jh.com">
        <i class="fa fa-cog" aria-hidden="true"></i>
      </a>

      <div id="navbar" class="navbar-collapse collapse">

        <ul class="nav navbar-nav">
          <li><a href="index.html">Home</a></li>
          <li><a href="#">Information</a></li>
          <li><a href="#">History</a></li>
          <li><a href="#">Attractions</a></li>
          <li><a href="#">Gallery</a></li>
          <li><a href="#">Contact</a></li>
        </ul>

        <ul class="nav navbar-nav navbar-right navbar-social">
          <li><a href="https://www.instagram.com"><i class="fa fa-instagram"></i></a></li>
          <li><a href="https://www.pinterest.com"><i class="fa fa-pinterest"></i></a></li>
          <li><a href="https://www.facebook.com"><i class="fa fa-facebook"></i></a></li>
          <li><a href="https://twitter.com"><i class="fa fa-twitter"></i></a></li>
        </ul>
        
      </div>
    </div>
  </nav>
</header>

【讨论】：