Я хотел бы использовать свойство Bootstrap .container для форматирования моего сайта, а не .container-fluid, так как я хочу, чтобы ширина была ограничена в определенных окнах просмотра. Я также хотел бы, чтобы половина (настольного) сайта была статична, заполняя левую половину окна. Я могу это сделать, но когда я использую position:fixed; col-md-6 использует 50% полной ширины области просмотра, а не .container, и мой контент простирается под правую половину, как вы можете видеть, где я уменьшил непрозрачность белого фона.
Как сделать левую половину моего отзывчивого контента фиксированной, сохраняя при этом свойства ширины .container?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<style>
.leftside {
background-image: url("http://studiotierney.com/studiotierneycom/sample/images/leftside-BG.jpg");
background-size:cover;
background-position:50% 50%;
padding:0;
}
@media (max-width:991px) {
.leftside {
height:800px;
color:white;
padding:0;
}
.bluebg {
position:absolute;
width:100%;
background-color:#0063af;
top: 0;
left: 0;
padding: 0; /* Cover the full screen width */
height:800px;
}
}
@media (min-width:992px) {
.leftside {
position:fixed;
height:100%;
color:white;
overflow:hidden;
padding:0;
}
.bluebg {
position:fixed;
width:50%;
background-color:#0063af;
top: 0;
left: 0;
padding: 0; /* Cover the full screen width */
height:100%;
}
}
.logo {
text-align:center;
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container bluebg"></div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 leftside">
<div class="row">
<div class="col-xs-2" style="background-color:yellow; height:300px;"></div>
<div class="col-xs-8 logo">
<img src="http://studiotierney.com/studiotierneycom/sample/images/sampleLogo.png" class="img-responsive" alt="Sample Logo" style="margin:auto;" />
</div>
<div class="col-xs-2" style="background-color:yellow; height:300px;"></div>
</div>
</div>
<div class="col-xs-12 col-md-6 col-md-offset-6" style="background-color:white;height:4000px; opacity:.8;">Scroll Content</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.js"></script>
</body>
</html>
http://studiotierney.com/studiotierneycom/sample/container-sample.html
Сделать фиксированное положение столбца в начальной загрузке
