Wie Grenzradius einer Taste, um wieder:

Ich habe dieses HTML:Wie Grenzradius einer Taste, um wieder:

<div class="input-group"> 
    <input type="email" placeholder="Your email" class="form-control input-lg" name="email"> 
    <span class="input-group-btn input-space"> 
    <button type="submit" class="btn btn-success btn-lg inline input-space">Join</button> 
    </span> 
</div>

wo input-space ist:

.input-group-btn.input-space { 
    padding-left: 15px; 
}

Nun, hier ist, was ich bekommen:

Hinweis links sind die knopfränder nicht abgerundet? Es scheint eine Regel zu sein, dass Bootstrap auf input-group-btn zutrifft, da erwartet wird, dass zwischen der Eingabe und der Schaltfläche kein Leerzeichen ist. Wie kann ich das entfernen, also hat der Button auf der linken Seite abgerundete Kanten, die denen auf der rechten Seite gleich sind? Ich benutze Bootstrap 3.

Quelle

2017-02-03 anemaria20

Sie müssen nur die Grenzradius erneut anwenden:

.input-group-btn.input-space:last-child>.btn { 
 
    border-radius: 4px; 
 
} 
 

 
.input-group-btn.input-space { 
 
    padding-left: 15px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="input-group"> 
 
    <input type="email" placeholder="Your email" class="form-control input-lg" name="email"> 
 
    <span class="input-group-btn input-space"> 
 
    <button type="submit" class="btn btn-success btn-lg inline input-space">Join</button> 
 
    </span> 
 
</div>

Quelle

2017-02-03 17:45:17

Ich bin nicht sicher, wie gut eine Idee auf die Schaltfläche anzuwenden padding-left ist. Vielleicht separate Border-Radius in eine eigene separate Klasse? – anemaria20

@ anemaria20 Ich habe mein Snippet aktualisiert. –

ich vermeiden würde mit input-group-btn, weil Sie in Ihrem Schuhlöffel gehen zu müssen, Design.

.input-group-btn.input-space { 
 
    padding-left: 15px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
    <div class="form-inline"> 
 
    <input type="email" placeholder="Your email" class="form-control input-lg" name="email"> 
 
    <button type="submit" class="btn btn-success btn-lg inline input-space">Join</button> 
 
    </div>

Quelle

2017-02-03 17:53:14

Ich versuche, die Schaltfläche direkt neben dem Eingabefeld zu bekommen, also ist dies keine praktikable Lösung. – anemaria20

Ansicht in der Vollbildansicht, das kleine Rendering zeigt es nicht, wie es auf einer ganzen Seite sein wird. –

Gemäß: http://www.w3schools.com/bootstrap/bootstrap_forms.asp gilt form-inline nur für Formulare in Ansichtsfenstern, die mindestens 768 Pixel breit sind. – anemaria20

Derzeit Bootstrap setzt die Grenze nach links und Bodenradius auf 0. Sie müssen sie nur außer Kraft zu setzen.

.input-group-btn:last-child>.btn { 
border-bottom-left-radius: 5px; 
border-top-left-radius: 5px; 
}

Dies ist, wie es aussieht, wenn ich den obigen Code zu Ihnen hinzufügen: https://jsfiddle.net/kjvhqqz5/

Image of fixed button

Quelle

2017-02-03 17:54:31 Staveven

Wie Grenzradius einer Taste, um wieder:

Antwort

Verwandte Themen