ブートストラップナビの右側にコンテンツを配置するにはどうすればいいですか？

私は最近、ブートストラップの使用を開始しました。しかし何らかの理由で私はボタンの右側にコンテンツを置くことはできません。黒い背景のボタンの右側にコンテンツのセクションがありたいと思います。ブートストラップナビの右側にコンテンツを配置するにはどうすればいいですか？

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>

出典

2017-02-14 Anonymous

クラスnavbar-rightをお探しですか？ – jmag

これは、上記の質問の続きです。すべての画面サイズで同じように見せたい場合は、これらのクラスを一緒に使用する必要があります。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>

この情報がお役に立てば幸い！

出典

2017-02-15 00:13:36 neophyte

あなたのNAVとあなたのメインのコンテンツに一定の列幅に一定の列幅を割り当て、ブートストラップの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>

出典

2017-02-14 19:06:13 WitVault

これはうまくいきましたが、ウィンドウのサイズを変更するたびに、テキストはページの左下にまっすぐに進みます。 –

実際には正しい動作です。 col-md-4およびcol-md-8の代わりにcol-xs-4およびcol-xs-8を使用してください – WitVault

ブートストラップナビの右側にコンテンツを配置するにはどうすればいいですか？

答えて

関連する問題