0
だから、サイドバーを作成してから、スペースとコンテンツ領域を作成したかったのです。サイドバーとコンテンツ領域の間隔については、ブートストラップ3の.offset--プロパティを使用したかったのですが、どういうわけか、それは例外として機能しません。ブートストラップ3の列オフセットは常に右側にあります
.main-content {
height: 200px;
background-color: green;
}
.sidebar {
height: 200px;
background-color: red;
}
.container {
border: 1px solid blue;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Example</title>
</head>
<body>
<div class="container main-container">
<div class="row">
<!-- Sidebar -->
<div class="sidebar col-md-3">
sidebar
</div>
<!-- Main Content -->
<div class="main-content col-md-8 offset-md-1">
content
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>、私が何を意味するかが表示フルページモードに例とswithcを実行します。ご覧のとおり、オフセットはサイドバーとコンテナの間で最も右にあります。サイドバーやメインコンテンツ要素に追加しても問題ありません。
私の例で何が問題になっていますか？
ああ、ありがとう。しかし、なぜ、.offset-md-1がここで動作しないのかを指摘できますか？ – xotix
@xotix私が知る限り、 'offset-md-1'のようなクラスはないからです。オフセットを与えるには 'col-md-offset- {no。}'クラスを使うべきです。この回答が問題の解決に役立った場合は、自分の回答の横にあるチェックボックスをクリックして、回答としてマークすることができます –