web-dev-qa-db-fra.com

Comment puis-je obtenir une mise en page à trois colonnes avec Twitter Bootstrap?

J'essaie de créer une mise en page à trois colonnes comme suit:

http://www.manisheriar.com/holygrail/index.htm

Il devrait s'agir d'une disposition fixed width - fluid width - fixed width.

En utilisant Twitter Bootstrap, la barre latérale gauche et le contenu fluide fonctionnent très bien. Mais il me faut aussi un right sidebar.

csstwitter-bootstrap
20
cbmeeks

Essayez ceci: 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>

Par les commentaires, j'ai mis à jour ma réponse pour permettre la possibilité de basculer entre la barre latérale droite et gauche avec juste une classe.

Vous pouvez maintenant utiliser les éléments suivants dans le <div class="content"> div:

CSS

.fixed-fluid {
    margin-left: 240px;
}
.fluid-fixed {
    margin-right: 240px;
    margin-left:auto !important;
}
.fixed-fixed {
    margin: 0 240px;
}

Démo: http://jsfiddle.net/andresilich/6vPqA/3/show/ Modifier: http://jsfiddle.net/andresilich/6vPqA/3/

Un autre utilisateur a demandé si cette méthode pouvait être adaptée à la dernière version du bootstrap (v2.0 au moment de l'écriture). Voici donc une démo qui l'utilise:

http://jsfiddle.net/andresilich/6vPqA/13/

31
Andres Ilich

Pour les personnes intéressées, voici un exemple de la dernière version de Bootstrap 3 ...

http://bootply.com/101100

Il vous suffit d'ajouter le .sidebar-nav-fixed à une DIV dans les colonnes gauche et droite col-md-3:

.sidebar-nav-fixed {
    width:20%;
}
2
Zim

C'est le meilleur que j'ai pu trouver.

http://www.bootply.com/9logoZy2fv

Voici le code:

   <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>

et le 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;
}
1
thouliha

Voici:

Cette solution utilise une disposition de tableau avec 3 colonnes: gauche, milieu et droite. OuterTable a une largeur de 100%, les colonnes gauche et droite ont des largeurs de pixel fixes et la colonne du milieu est mise à l'échelle pour remplir l'espace restant. La colonne du milieu contient un conteneur Bootstrap 3 contenant une série d’échantillons de la col-xx-1. Redimensionnez la largeur de votre navigateur afin de voir le processus de dimensionnement de la grille d'amorçage standard en cours (c'est-à-dire que les colonnes col-lg-1 passeront à la largeur maximale lorsque la largeur du navigateur est <1200 etc ...

BTW, il est plus facile de jouer avec le redimensionnement du navigateur en mode "rendu" de bootply:

Et du contenu plus bootstrappy:

1
Ilan