Platzieren und fixieren Sie ein Symbol am rechten Rand des Eingabe-textbox mit Twitter Bootstrap

Ich habe gerade angefangen mit Twitter Bootstrap (ich bin neu auf, so dass ich verstehen nicht, dass es durchaus noch!) und ich bin versucht, erstellen Sie eine zwei-Spalten-form mit bestimmten visuellen Elementen.

Die komplette Breite der form, ist ca. 80% der Breite des Viewports und innerhalb hier sind zwei (etwa gleich verteilt) Spalten der Etiketten und die zugehörigen Textfelder. Einige der Textfelder, müssen Sie ein kleines Symbol angebracht an der rechten Seite des Textfeld, und für das Symbol zu bleiben, fest an der rechten Seite des Textfeld, wenn der Benutzer die Größe des browser-Fenster (so bleiben diese mindestens bis zu einer Auflösung von 1024x768). Ich bin auch versucht, zu erreichen, all dies mit einem "responsive design".

Kann ich es sieht gut bei höheren Auflösungen, aber ich weiß, ich mache etwas falsch, da die Symbole sind der Anzeige von "innen" die Textfelder, wenn der user die Größe des browser-Fensters.

Dieses erste Bild zeigt, wie das Formular Aussehen sollte (ungefähr) in allen Größen:

Aber wenn die Größe des browser-Fenster, es tut:

Möchte ich, dass der kleine Briefumschlag-icon zu bleiben fest an der rechten Seite der textbox zu allen Zeiten. Leider, wenn Sie das browser-Fenster verkleinert, sogar noch weiter, es bewegt sich zur nächsten Zeile:

Ich bin mit ASP.NET MVC generieren viel von dieser form, so gibt es viele @Html.TextBoxFor Anrufe innerhalb der mark-up, aber ich habe ein JSFiddle mit einem Teil der relevanten gerendert mark-up, das unterstreicht das problem:

http://jsfiddle.net/qYTSY/1/

Ich bin sicher, ich habe einen gänzlich falschen Ansatz bei dieser, allerdings bin ich kein designer, also bin ich kämpfen, um Sie zu optimieren, die aktuelle mark-up zu erreichen, was ich bin nach. Kann mir jemand bitte helfen?

Haben Sie versucht, Vorangestellt und angehängt-Eingänge ?
Ich hatte versucht, dies zuvor, mit nicht viel Glück, aber, ich habe auch vor kurzem versucht, andere Dinge, die in Kombination mit diesem, und ich denke, dass ich da bin. Siehe meine Antwort unten. Vielen Dank für Ihre Hilfe!

InformationsquelleAutor CraigTP | 2012-10-23

1

In jsfiddle ich habe eine Klasse:
```
.controls-row-with-icon {
    width: 28em;
}
```
...und dann offensichtlich geändert, die beiden divs zu:
```
<div class="controls controls-row controls-row-with-icon">
```
Dass "pins", die E-mail-Symbol auf der rechten Seite. Nicht sicher, ob es "bricht" alles andere aber?

Hinweis: in jsfiddle die zwei Spalten schien sich zu überlappen - nicht sicher, ob Sie es tun würden, dass in Ihrer Produktion version aber? Ich konnte nicht die rh-Spalte zu "fallen unter" die lh-Spalte, wenn der viewport kleiner war - aber denke, dass das ok arbeitet in Ihrem Produktionscode?

Rob

BEARBEITEN

Siehe Kommentar
```
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;

}

.row{
    /*min-width: 62em;*/ /* add this is viewport should be fixed */
}

.controls-row{
    width: 30em;
    background: #ccc;
}

.row-fluid .span5{

    margin-left: 0;
    margin-right: 2em;
    width: 30em;
}

.row-fluid .offset1{
    margin-left:0;
    margin-right: 0;
}
```
- Auch - feststellen, Sie sind mit %Alter ist für die Breite - was in Ordnung ist. Aber es sei denn, das label und die textbox Größen sind auch Flüssigkeit (einschließlich schriftart,-Größe und Bildgröße) benötigen Sie einige Feste Breite in es zu vermeiden, diese Art von überschneidungen Fragen.
- Ok - ein Beispiel, wie ich es tun würde, von Grund auf neu hier... jsfiddle.net/ntMNv/6
- Ok - von der original-js-fiddle - jetzt mit einer festen Breite etc. haben eine Feste, aber immer noch Flüssigkeit schwimmende 2-Spalte, die unter sitzen, wenn der viewport zu klein - passen breiten etc, wie es sein muss. Es ist hauptsächlich nur das überschreiben der %Zeitalters breiten mit em ' s (Siehe edit in Antwort)
InformationsquelleAutor LiverpoolsNumber9
0

Nun, nach einigen Anpassungen um, ich glaube, ich habe eine Lösung gefunden!

Hier ist eine aktualisierte JSFiddle:

http://jsfiddle.net/qYTSY/32/

die highlights der Antwort (ignorieren der ersten Spalte - ich habe es behoben, getrennt.)

Vielen Dank an beide LiverpoolsNumber9 und Sherbrow für Ihre Hilfe führt mich zu einer Lösung.

Der Knackpunkt, meine Lösung war das entfernen der span3 Klasse span element um die input-Elemente, die benötigt werden das Symbol an diese angehängt (wenn Sie diese span im Ort, verursacht alle Arten von seltsamen und wundervollen Probleme), dann aber auch die Verpackung des input-element und das Symbol-element in einem extra div und mit der input-append und add-on Klassen, um sicherzustellen, das Symbol ist platziert und befestigt, um die rechts neben dem Eingabefeld.

Also dieser mark-up:
```
<div class="controls controls-row">
    <span class="span3"><label for="Contact_EMail">EMail</label></span>
    <span class="span3"><input id="Contact_EMail" name="Contact.EMail" type="text" value="" /></span>
    <span class="offset4"><a href="mailto:[email protected]" id="emaillink"><i class="icon-envelope" id="emailicon"></i></a></span>
</div>
```
Wurde diese:
```
<div class="controls controls-row">
    <span class="span3"><label for="Contact_EMail">EMail</label></span>
    <div class="input-append">
        <span><input id="Contact_EMail" name="Contact.EMail" type="text" value="" /></span>
        <span class="add-on"><a href="mailto:[email protected]" id="emaillink"><i class="icon-envelope" id="emailicon"></i></a></span>
    </div>
</div>
```
Obwohl ich eine Lösung gefunden habe muss ich gestehen, dass, wo CSS/Styling/Twitter Bootstrap betrifft, ich fühle mich immer noch ein viel wie diese!

InformationsquelleAutor CraigTP

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.