Я пытаюсь создать макет из трех столбцов, который выглядит следующим образом:
http://www.manisheriar.com/holygrail/index.htm
Это должен быть макет fixed width - fluid width - fixed width.
Используя Twitter Bootstrap, левая боковая панель и содержимое жидкости работают отлично. Но мне нужно добавить right sidebar тоже.
Попробуйте следующее: http://jsfiddle.net/andresilich/6vPqA/2/
CSS
.container-fluid > .sidebar {
position: relative;
top: 0;
left:auto;
width: 220px; /* width of sidebar */
}
.left {
float:left;
}
.right {
float:right;
}
.container-fluid > .content {
margin: 0 240px; /* width of sidebars + 10px of margin */
}
HTML
<div class="sidebar left">
<div class="well">
<h5>Sidebar</h5>
.....
</div>
</div>
<div class="sidebar right">
<div class="well">
<h5>Sidebar</h5>
.....
</div>
</div>
В комментариях я обновил свой ответ, чтобы иметь возможность переключаться между правой и левой боковой панелью только с классом.
Теперь вы можете использовать следующее в <div class="content"> div:
CSS
.fixed-fluid {
margin-left: 240px;
}
.fluid-fixed {
margin-right: 240px;
margin-left:auto !important;
}
.fixed-fixed {
margin: 0 240px;
}
Демо: http://jsfiddle.net/andresilich/6vPqA/3/show/ Изменить: http://jsfiddle.net/andresilich/6vPqA/3/
Другой пользователь спросил, может ли этот метод быть адаптирован к последней версии бутстрапа (v2.0 на момент написания), поэтому вот демонстрационная версия, которая его использует:
Для всех, кого это интересует, вот пример последней версии Bootstrap 3...
Вам просто нужно добавить .sidebar-nav-fixed в DIV внутри столбцов слева и справа col-md-3:
.sidebar-nav-fixed {
width:20%;
}
Это лучшее, что я мог найти.
http://www.bootply.com/9logoZy2fv
Здесь код:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="http://bootply.com">Bootply</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Responsive</a></li>
<li><a href="#">Layout</a></li>
<li><a href="#">Example</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--sidebar-->
<div class="sidebar-nav-fixed" data-spy="affix" data-offset-top="140">
<ul class="nav nav-list">
<li><a href="#">Home</a></li>
<li><a href="#">Responsive</a></li>
<li><a href="#">Layouts</a></li>
<li class="divider"></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Modal</a></li>
<li><a href="#">Carousel</a></li>
<li class="divider"></li>
<li><a href="#">Typeahead</a></li>
<li><a href="#">Themes</a></li>
<li><a href="#">Template</a></li>
<li><a href="#">Affix</a></li>
<li class="divider"></li>
<li><a href="#">Bootstrap 3</a></li>
<li><a href="#">Sidebar</a></li>
<li><a href="#">Grid</a></li>
<li><a href="#">Column</a></li>
<li class="divider"></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
<div class="span3">
<!--2nd column-->
<div id="midCol" data-spy="affix" data-offset-top="250">
<img src="//placehold.it/300x150/449955/FFF">
<h4 class="caption">Image Caption <span class="pull-right"><i class="icon-twitter"></i></span></h4>
<hr>
<img src="//placehold.it/300x150/2255EE/EEE">
<h4 class="caption">Image Caption</h4>
<hr>
<img src="//placehold.it/300x150/992233">
<h4 class="caption">Image Caption</h4>
<hr>
<img src="//placehold.it/300x150/555555/FFF">
<h4 class="caption">Image Caption</h4>
<hr>
<img src="//placehold.it/300x150/d9d9d9/EEE">
<h4 class="caption">Image Caption</h4>
<hr>
</div><!--/middleCol-->
</div><!--/span3-->
<div class="span7">
<div class="well"><h1>3-Column Layout</h1><p>This is a template example that uses the Bootstrap framework to create a responsive three-column layout.
The left column (narrow) contains a sidebar, the center column (mid) contains features with image/caption, and the right column (widest) contains content.
</p>
<a href="http://www.bootply.com/63275" class="btn btn-primary">Details</a>
<span class="badge pull-right">100</span>
</div>
<div class="well"><h1>Affix</h1><p>This layout utilizes the <b>Bootstrap Affix</b> component using data attributes. You can see
the Affix plugin in action as you scroll down the page. The leftmost side is "pinned" until 140px is reached, and the middle column is un-pinned once 250px is reached.
See the CSS <code>.affix</code> and <code>.affix-top</code> classes to see how this works.
</p>
<button class="btn">Details</button>
</div>
<div class="well"><h1>Bootply</h1><p>This example layout is compliments of Bootply -- the Bootstrap playground.
Bootply lets you play with JavaScript, HTML, CSS and Bootstrap in a simple Web-based editor. Bootply enables you to
easily include popular libraries, plugins, extensions and frameworks such as jQuery, FontAwesome, AngularJS, FuelUX and Google Maps.
</p>
<a href="http://www.bootply.com" class="btn">Details</a>
</div>
<div class="well"><h1>HTML5 / CSS3</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
<a href="http://www.bootply.com/63275">Edit this on Bootply</a>.</p>
<button class="btn">Details</button>
</div>
<div class="well"><h1>Snippets</h1><p>Bootply is also a collaborative tool that enables sharing of snippets. There is a repository of more than 1000 Bootstrap-ready code snippets. Find
code snippets demonstrate common Bootstrap components such as the carousel (sliders), modal, typeahead, navbar, typography, buttons, tabs and icons.</p>
<a href="http://www.bootply.com" class="btn">Details</a>
</div>
<div class="well"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</p>
<button class="btn">Details</button>
</div>
</div>
</div>
</div>
и CSS:
body {
padding-top: 60px;
}
@media (max-width: 979px) {
body {
padding-top: 0px;
}
}
/* uncomment this section to make the sidebar un-pin
.affix-top {
top:60px;
position:fixed;
}
.affix {
position:static;
}
*/
.affix-top {
top:60px;
position:fixed;
}
/* custom theme */
#midCol.affix-top {
position:fixed;
margin-left:-18px;
margin-right:10px;
}
#midCol.affix-bottom {
position:static;
}
#midCol.affix {
position:static;
}
@media (max-width:1190px) {
.affix,.affix-top,#midCol.affix,#midCol.affix-top {
position:static;
}
}
.caption {
background-color:#eee;
padding:10px;
margin:0;
color:#555;
}
Здесь вы идете:
В этом решении используется таблица с тремя столбцами: левая, средняя, правая. Внешняя таблица имеет ширину 100%, левый и правый столбцы имеют фиксированную ширину пикселей, а средний столбец масштабируется, чтобы заполнить оставшееся пространство. Средний столбец содержит контейнер Bootstrap 3 с кучей образца col-xx-1. Измените размер вашего браузера, чтобы увидеть стандартный процесс калибровки сетки загрузки (т.е. Col-lg-1 изменится на полную ширину, когда ширина браузера равна < 1200 и т.д.)
Кстати, проще играть с изменением размера браузера в режиме "рендеринга":
И еще более загрузочный контент: