Comment puis-je passer trois boutons dans la même rangée, à gauche, au milieu et à droite dans un fluide-largeur du conteneur?

Je suis en utilisant LESS dans un Twitter Bootstrap de l'environnement, mais j'ai accepté tout de CSS réponses.

| Fluid-width container                            |
|                                                  |
| [Btn1]               [Btn2]               [Btn3] |
|                                                  |

Une autre largeur:

| Fluid-width container                |
|                                      |
| [Btn1]         [Btn2]         [Btn3] |
|                                      |

OriginalL'auteur Ryan | 2013-07-23

  1. 4

    À mon avis, vous pouvez le faire avec un stock de bootstrap de l'environnement comme ceci:

    <div class="row-fluid">
  <div class="span4 text-left"><a href="#" class="btn">Btn1</a></div>
  <div class="span4 text-center"><a href="#" class="btn">Btn2</a></div>
  <div class="span4 text-right"><a href="#" class="btn">Btn3</a></div>
</div>

    Cela fait trois <div>'s que span4 colonnes qui composent les douze colonnes de la grille de bootstrap.

    Vous n'avez pas besoin d'ajouter supplémentaire CSS que ceux .texte (gauche, droite et centre de classes de navire avec bootstrap.

    Je ne connaissais pas text-left, text-center, text-right. Merci! Pourquoi ancres à la place des boutons? Et pourquoi text-left sur le point d'ancrage au lieu de l'emballage des div?
    J'ai fait l' .texte à gauche juste pour montrer qu'il est disponible... Il fonctionne avec <button> et d'autres éléments en ligne. Vous avez raison à propos de la classe de miss appliquée sur la <a> au lieu de l'élément parent. Donc j'ai juste édité ma réponse.

    OriginalL'auteur sulfureous

  2. 3

    http://jsfiddle.net/GNPpX/1/

    Vous pouvez le faire à l'aide de flotteurs

    <div class='container'>
    <button id="btn1">one</button>
    <button id="btn2">two</button>
    <button id="btn3">three</button>
</div>


.container{
    width: 100%;
    float: left;
    border: solid 1px blue;
    text-align: center;
}
.container button{
    display: inline-block;
}
#btn1{
    float:left;
}
#btn3{
    float:right;
}

    OriginalL'auteur Smeegs

  3. 3

    Je pense que cela pourrait être la façon la plus simple...

    HTML

    Noter que les éléments imbriqués sont inline éléments

    <div>
    <span>item1</span>
    <span>item2</span>
    <span>item3</span>
</div>

    CSS

    div
{
    border: 1px solid lime;
    text-align: center;
}

span
{
    background-color: #ff8;
}

span:first-child
{
    background-color: #f8f;
    float: left;
}

span:last-child
{
    background-color: #8ff;
    float: right;
}

    JSFiddle

    http://jsfiddle.net/TUwek/

    OriginalL'auteur gvee

  4. 1

    Je ne sais pas si c'est exactement ce que vous voulez, mais à l'aide de display: table; sur le parent et display: table-cell sur les enfants, vous donne un tel rendu :

    HTML :

    <ul>
    <li class="left"><button>BTN1</button></li>
    <li><button>BTN2</button></li>
    <li class="right"><button>BTN3</button></li>
</ul>

    CSS :

    ul {
    display: table;
    width: 60%;
}
li {
    display: table-cell;
}
li.left {text-align: left;}
li.right {text-align: right;}

    Le Violon

    OriginalL'auteur Brewal

  5. 1

    Je l'ai eu à travailler avec les éléments suivants:

    <style>
    .center { text-align: center; }
    .right { text-align: right; }
</style>

<div class="row-fluid">
    <div class="span4"><button>One</button></div>
    <div class="span4 center"><button>Two</button></div>
    <div class="span4 right"><button>Three</button></div>
</div>

    OriginalL'auteur Ryan

  6. 1

    http://jsfiddle.net/feitla/yvXdc/1/

    Ici, vous allez:

    <div class="container">
    <div class="container-fluid full-width">
        <div class="row-fluid">
            <button class="btn pull-left">button 1</button>
            <button class="btn">button 2</button>
            <button class="btn pull-right">button 3</button>
        </div>
    </div>
</div>

.container {
   text-align:center;
} 
 button {
     display:inline-block;
}

    OriginalL'auteur feitla