如何将内容放在 bootstrap 导航的右侧

Question

所以我最近才开始使用 bootstrap，并且我创建了导航按钮。但出于某种原因，我无法在按钮右侧放置任何内容。我想在按钮右侧有一个黑色背景的内容部分。

body{
    overflow: hidden;
    background-color: #1C213D;
}

ul li{
    position: relative;
    text-align: center;
    list-style: none;
    display: block;
    color: lightsteelblue;
    font-size: 20px;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-top: 200px;
}

.nav{
    width: 200px;
}

<!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Home</title>
</head>  
<body>
    <div class="container-fluid">
            <ul class="nav nav-pills nav-stacked" role="tablist">
                    <li class="active"><a href="home.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="projects.html">Projects</a></li>
                    <li><a href="contact.html">Contact</a></li>        
            </ul>
    </div>
</body>
</html>

Answer 1

您可以使用 bootstrap 的 col-* 类，为您的导航分配特定的列宽，为您的主要内容分配特定的列宽。

检查扩展 window 中的结果。

body{
    overflow: hidden;
    background-color: #1C213D;
}

ul li{
    position: relative;
    text-align: center;
    list-style: none;
    display: block;
    color: lightsteelblue;
    font-size: 20px;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-top: 50px;
}

.nav{
    width: 200px;
}

.main{
     margin-top:50px;
  }

<!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Home</title>
</head>  
<body>
  <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
  </div>
</nav>
  
    <div class="container-fluid">
       <div class="col-md-4">
            <ul class="nav nav-pills nav-stacked" role="tablist">
                    <li class="active"><a href="home.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="projects.html">Projects</a></li>
                    <li><a href="contact.html">Contact</a></li>        
            </ul>
      </div>
      <div class="col-md-8 main">
             Main content goes here
      </div>
    </div>
</body>
</html>

Answer 2

这是上述问题的延续。如果你想让任何 bottstrap 设计响应，即如果你想让它在所有屏幕尺寸下看起来都一样，你应该一起使用这些类 col-md-4 col-lg-4 col-sm-4 col-xs-4。我还使用了 col-lg-offset-1 偏移量类，因为它会在您的元素和设计之间创建自动边距（在本例中为 1 列的边距）并且设计看起来不错。

body{
    overflow: hidden;
    background-color: #1C213D;
}

ul li{
    position: relative;
    text-align: center;
    list-style: none;
    display: block;
    color: lightsteelblue;
    font-size: 20px;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-top: 50px;
}

.nav{
    width: 200px;
}

.main{
     margin-top:50px;
  }

<!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Home</title>
</head>  
<body>
  <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
  </div>
</nav>
  
    <div class="container-fluid">
       <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
            <ul class="nav nav-pills nav-stacked" role="tablist">
                    <li class="active"><a href="home.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="projects.html">Projects</a></li>
                    <li><a href="contact.html">Contact</a></li>        
            </ul>
      </div>
      <div class="col-md-7 col-lg-7 col-xs-7 col-sm-7 col-lg-offset-1  col-md-offset-1 col-sm-offset-1 col-xs-offset-1 main">
             Main content goes here
      </div>
    </div>
</body>
</html>

希望对您有所帮助！

如何将内容放在 bootstrap 导航的右侧

How can I put content to the right of my bootstrap nav

html

css

button

nav

twitter-bootstrap