1
Pour les trois boutons orange intitulés "Action" ci-dessous, j'essaie de les afficher en ligne, horizontalement, sur la même ligne (répartis uniformément sur la ligne). Je les ai mis dans un «groupe btn», ce que j'ai pensé gérer automatiquement.Aligner 3 boutons sur la même ligne avec Bootstrap
Ai-je besoin d'utiliser des tailles de col pour ajouter jusqu'à douze ans? Comment puis-je répartir équitablement les trois boutons sur la même ligne?
Les trois boutons dans le "groupe btn" se trouvent au bas de mon code. Voici mon code:
<div class="c-form-container section-container section-container-image-bg">
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 c-form section-description wow fadeIn">
<h1>Happy <strong>Hour</strong></h1>
<p>If you win, you drink for free, and your friends half off!</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 c-form-box wow fadeInUp">
<div class="c-form-top">
<div class="c-form-top-left">
<h3>Sign Up</h3>
<p>Fill in the form below to win a happy hour:</p>
</div>
<div class="c-form-top-right">
<div class="c-form-top-right-icon">
<i class="fa fa-paper-plane"></i>
</div>
</div>
</div>
<div class="c-form-bottom">
<form role="form" action="assets/contact.php" method="post">
<div class="form-group">
<label for="c-form-name">
<span class="label-text">Name:</span>
<span class="contact-error"></span>
</label>
<input type="text" name="name" placeholder="First & Last Name" class="c-form-name form-control" id="c-form-name">
</div>
<div class="form-group">
<label for="c-form-birthday">
<span class="label-text">Birthday:</span>
<span class="contact-error"></span>
</label>
<input type="text" name="birthday" placeholder="Your Birthday" class="c-form-birthday form-control" id="c-form-birthday">
</div>
<div class="form-group">
<label for="c-form-email">
<span class="label-text">Email:</span>
<span class="contact-error"></span>
</label>
<input type="text" name="email" placeholder="Your Email Address" class="c-form-email form-control" id="c-form-email">
</div>
<div class="form-group">
<label for="c-form-cell">
<span class="label-text">Cell Phone:</span>
<span class="contact-error"></span>
</label>
<input type="text" name="cell" placeholder="Your Cell Phone Number" class="c-form-cell form-control" id="c-form-cell">
</div>
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Separated link</a>
</li>
</ul>
<button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Separated link</a>
</li>
</ul>
<button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Separated link</a>
</li>
</ul>
</div>
<button type="submit" class="btn">Submit Information</button>
</form>
</div>
</div>
</div>
</div>
</div>Voici mon fichier css:
body {
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
color: #888;
line-height: 30px;
text-align: center;
}
strong {
font-weight: 500;
}
a,
a:hover,
a:focus {
color: #de615e;
text-decoration: none;
-o-transition: all .3s;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
h1,
h2 {
margin-top: 10px;
font-size: 38px;
font-weight: 100;
color: #555;
line-height: 50px;
}
h3 {
font-size: 22px;
font-weight: 300;
color: #555;
line-height: 30px;
}
img {
max-width: 100%;
}
::-moz-selection {
background: #de615e;
color: #fff;
text-shadow: none;
}
::selection {
background: #de615e;
color: #fff;
text-shadow: none;
}
.btn-link-1 {
display: inline-block;
height: 50px;
margin: 5px;
padding: 16px 20px 0 20px;
background: #de615e;
font-size: 16px;
font-weight: 300;
line-height: 16px;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.btn-link-1:hover,
.btn-link-1:focus,
.btn-link-1:active {
outline: 0;
opacity: 0.6;
color: #fff;
}
.btn-link-1.btn-link-1-facebook {
background: #4862a3;
}
.btn-link-1.btn-link-1-twitter {
background: #55acee;
}
.btn-link-1.btn-link-1-google-plus {
background: #dd4b39;
}
.btn-link-1 i {
padding-right: 5px;
vertical-align: middle;
font-size: 20px;
line-height: 20px;
}
.btn-link-2 {
display: inline-block;
height: 50px;
margin: 5px;
padding: 15px 20px 0 20px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid #fff;
font-size: 16px;
font-weight: 300;
line-height: 16px;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.btn-link-2:hover,
.btn-link-2:focus,
.btn-link-2:active,
.btn-link-2:active:focus {
outline: 0;
opacity: 0.6;
background: rgba(0, 0, 0, 0.3);
color: #fff;
}
/***** Top content *****/
.inner-bg {
padding: 100px 0 170px 0;
}
.top-content .text {
color: #fff;
}
.top-content .text h1 {
color: #fff;
}
.top-content .description {
margin: 20px 0 10px 0;
}
.top-content .description p {
opacity: 0.8;
}
.top-content .description a {
color: #fff;
}
.top-content .description a:hover,
.top-content .description a:focus {
border-bottom: 1px dotted #fff;
}
.form-box {
margin-top: 35px;
}
.form-top {
overflow: hidden;
padding: 0 25px 15px 25px;
background: #444;
background: rgba(0, 0, 0, 0.35);
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
text-align: left;
}
.form-top-left {
float: left;
width: 75%;
padding-top: 25px;
}
.form-top-left h3 {
margin-top: 0;
color: #fff;
}
.form-top-left p {
opacity: 0.8;
color: #fff;
}
.form-top-right {
float: left;
width: 25%;
padding-top: 5px;
font-size: 66px;
color: #fff;
line-height: 100px;
text-align: right;
opacity: 0.3;
}
.form-bottom {
padding: 25px 25px 30px 25px;
background: #444;
background: rgba(0, 0, 0, 0.3);
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
text-align: left;
}
.form-bottom form textarea {
height: 100px;
}
.form-bottom form button.btn {
width: 100%;
}
.form-bottom form .input-error {
border-color: #de615e;
}
.social-login {
margin-top: 35px;
}
.social-login h3 {
color: #fff;
}
.social-login-buttons {
margin-top: 25px;
}
/***** Media queries *****/
@media (min-width: 992px) and (max-width: 1199px) {}@media (min-width: 768px) and (max-width: 991px) {}@media (max-width: 767px) {
.inner-bg {
padding:60px 0 110px 0;
}
}
@media (max-width: 415px) {
h1,
h2 {
font-size: 32px;
}
}
J'ai essayé d'ajouter 'btn-toolbar', sans effet. Merci bien –
utilisez-vous un autre fichier css qui l'affecte? –
J'ai édité le poste et inclus mon fichier css –