1
Пожалуйста, извините этот новый вопрос о быстром реагировании Bootstap. Я просто пытаюсь использовать макет, используя то, что, по моему мнению, представляет собой флюидную вложенную сетку. Я поставил цвета фона gory на все столбцы, чтобы я мог видеть, где они начинаются и заканчиваются. Макет выглядит неплохо, но если я изменил размер браузера, сделав его более узким, я бы ожидал, что на каком-то этапе самый правый полевой элемент движется ниже желтого, когда пространство становится уже. Тем не менее, обе колонки просто становятся более узкими. Мне, вероятно, не хватает базового понимания, и я бы очень признателен за любую помощь. Вот мой полный код страницы:Bootstrap простой макет не реагирует
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="../assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Your Company</a>
<div class="navbar-content">
<ul class="nav">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2" style="background-color:aqua">
<ul class="nav nav-list nav-stacked">
<li class="nav-header">SETTINGS</li>
<li class="active">
<a href="#">Subnavigation One</a>
</li>
<li>
<a href="#">Subnavigation Two</a>
</li>
</ul>
</div>
<div class="span10">
<form>
<div class="row-fluid" style="background-color:gray">
<h2 class="page-header">Heading in div .row-fluid within a div .span10</h2>
<div class="row-fluid">
<div class="span5">
<fieldset style="background-color:yellow">
<legend>Yellow Fieldset, in a div .span5</legend>
<label>Label name</label>
<input type="text" placeholder="Type something…"/>
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox" /> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</div>
<div class="span7">
<fieldset style="background-color:green">
<legend>Green Field Set, in a div .span7</legend>
<label>Label name</label>
<input type="text" placeholder="Type something…"/>
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox" /> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap.js"></script>
</body>
</html>