複数のサイズの画面に対して反応的なサイトを設定しようとしています。ブートストラップサイズxs
,sm
,md
およびlg
。不要なときにスクロールバーを消すには?
3つの小さいサイズですべてうまく動作します。つまり、必要なときにスクロールバーが右側にのみ表示されます。
はしかし、それはあまりにも広い取得しないように1024px幅を有している大型画面、上、はどのように私はそれが必要なときのみに垂直スクロールバーが表示され得ることができますか?
LARGE SIZEは必要ない不要なスクロールバーがあります。
.pagecontent {
margin: 0 18px;
}
/* bootstrap override */
.container {
width: 100%;
padding: 0;
}
.navbar {
border-radius: 0px;
}
.navbar-text {
float: left !important;
margin-right: 10px;
}
.navbar-right {
float: right!important;
}
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
.navbar-nav {
margin-bottom: 0;
margin-top: 0;
margin-left: 0;
}
.container {
width: 1024px;
padding: 0;
background-color: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
}
html {
min-height: 100%;
/* make sure it is at least as tall as the viewport */
position: relative;
}
body {
height: 100%;
/* force the BODY element to match the height of the HTML element */
background-color: #999;
}
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="?">Bootstrap Showcase</a>
</div>
</div>
</nav>
<div class="pagecontent">
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
</div>
</div>
</body>
</html>
補遺:私はoverflow-y: scroll
を削除した場合
、私は右側のスクロールバーを取得しますが、コンテンツは、下の前に拡張しています
あなたが私たちに与えたコードによってスクリーンショットが作成されているのではありません。このパッケージを使用する理由はありますか?ラッパーを流したままにしておきますか? – abluejelly