web-dev-qa-db-fra.com

Comment faire un bouton Bootstrap pleine largeur?

C'est ce que j'ai en ce moment. Je ne peux pas le faire devenir pleine largeur

Presque pleine largeur

C'est le html. J'ai déjà essayé d'ajouter la classe .btn-block mais j'obtiens les mêmes résultats que si je venais d'utiliser la largeur: 100%; dans le css. Peut-être que le problème vient de l'élément parent?

<article class="col-xs-12 col-md-4">
            <div class="label label-success price"><span class="glyphicon glyphicon-tag"></span>$39</div>

            <div class="price-title">
                <h3>LOREM</h3>

                <small>Lorem Ipsum</small>
            </div>

            <div class="price-content ">
                <ul>
                    <li><h4>Item or Service # 1</h4></li>
                    <li><h4>Item or Service # 2</h4></li>
                    <li><h4>Item or Service # 3</h4></li>
                    <li><h4>Item or Service # 4</h4></li>
                    <li><h4>Item or Service # 5</h4></li>
                    <li><h4>Item or Service # 6</h4></li>
                </ul>

                <a href="#"><div class="btn btn-success">Sign Up</div></a>
            </div>
        </article>

Et ce sont les styles

#tables{
color: white;
text-align: center;
margin: 15px 20px;}


.price{
position: relative;
top: 20px;
font-size: 30px;}

.price-content{
background-color: #E8E9EA;
color: #69696A;
padding-right: 50px;
padding-top: 30px;
height: 350px;
margin-bottom: 80px;
width: 100%;}

.btn{
border-radius: 0px;
font-size: 20px;
font-weight: bold;
width: 100%;}
csstwitter-bootstrapbuttonwidth
9
Andrés Liu

Eh bien, première question ... pourquoi diable embrassez-vous un div à l'intérieur de la balise a? <a href="#"><div class="btn btn-success">Sign Up</div></a>. Essaye ça:

<a class="btn btn-block btn-success" href="#">Sign Up</a>

Supprimez ensuite padding-right: 50px; du .price-content sélecteur.

23
Sean Stopnik

Je pense que c'est parce que vous utilisez

rembourrage à droite: 50px

dans

.price-content

Essayez de déplacer votre bouton en dehors de la division du contenu de prix.

0
Stand Still