1
Für die drei orange Schaltflächen mit dem Titel "Aktion" unten, versuche ich, sie inline, horizontal, auf der gleichen Linie (gleichmäßig über die Zeile verteilt). Ich habe sie in eine "BTN-Gruppe" gestellt, von der ich dachte, dass sie das automatisch erledigt.Richten Sie 3 Tasten in der gleichen Zeile mit Bootstrap
Muss ich zwölf aufzuaddieren col Größen benutzen? Wie kann ich die drei Tasten auf der gleichen Linie gleichmäßig verteilen?
Die drei Buttons innerhalb der "btn-group" befinden sich am Ende meines Codes. Hier ist mein 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>Hier ist meine CSS-Datei:
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;
}
}
Ich habe versucht, 'Btn-Toolbar', kein Effekt. Danke, obwohl –
verwenden Sie eine andere CSS-Datei, die es beeinflusst? –
Ich bearbeitet den Beitrag und enthalten meine CSS-Datei –