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

您可以使用col- *类引导程序，为导航分配某些列宽，并为主要内容指定某些列宽。

在展开的窗口中检查结果。

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

这是对上述问题的延续。如果您想要使任何底部设计响应，即如果您希望它在所有屏幕尺寸中看起来相同，则应同时使用这些类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导航的右侧

2 个答案: