Flüssigkeitseingang-anfügen in Bootstrap Responsive

Question

Ich habe gekämpft, um eine Eingabe mit einem Input-Append-Element zu erhalten, um die richtige Breite in einem Fluid-Layout zu haben. Ich benutze v2.0.4 von Bootstrap. Wenn ich die Größe ändere, um die Seite kleiner zu machen, bricht sie in eine neue Zeile ein. Im Idealfall würde ich die Eingabe die volle Breite des Brunnens (wie die Warnungen) haben. Ich habe das Markup und einige Screenshots unten eingefügt. Jede Hilfe sehr geschätzt!

<div class="row-fluid"> 
    <div class="span3 well"> 
     <form class="form-horiztonal"> 
      <h2>Filters</h2> 
      <fieldset> 
       <div class="control-group"> 
        <label class="control-label" for="msisdn">MSISDNs</label> 
        <div class="controls"> 
         <div class="input-append"> 
          <input class="span10" id="msisdn" size="" type="text" name="msisdn"><button 
          class="btn btn-primary" type="submit"><i class="icon-plus icon-white"></i></button> 
         </div> 
        </div> 
       </div> 
      </fieldset> 
     </form> 
    </div> 

    <div class="span9"></div> 
</div> 

Answer 1

Responsive CSS ist, was diese nach oben ist Auslösung.

von einigen der reaktions CSS überschreiben mit

#msisdn { 
    width: 75%; 
    display: inline-block; 
    } 

hoffentlich können Sie sehen, was passiert. Das wird dir hoffentlich nahe genug kommen.

Answer 2

Da Ihre input eine .span10 ist, sollte die Schaltfläche eine .span2 sein.

<div class="input-append"> 
    <input class="span10" id="msisdn" size="" type="text" name="msisdn"><button class="btn btn-primary span2" type="submit"><i class="icon-plus icon-white"></i></button> 
</div> 

Aber das Verhalten der Schaltfläche ändert sich radikal. Sie können es mit diesem CSS beheben:

.input-append .btn { 
    float: none!important; 
    margin-left: 0!important; 
} 

Und noch präziser zu sein, sollte die Taste so groß sein wie ein .span2 plus fluidGridGutterWidth. Welches ist width: 17.02127659% gemäß den Standardwerten.

Answer 3

ersetzen <form class="form-horiztonal"> mit <form id="formfilters" class="form-horiztonal">

den folgenden jQuery-Code hinzufügen.

function sizing() { 
    var formfilterswidth=$("#formfilters").width(); 
    $("#msisdn").width((formfilterswidth-46)+"px"); 
} 
$(document).ready(sizing); 
$(window).resize(sizing);​ 

Und es sieht durchweg gut

Klein:

Groß:

Answer 4

Ich habe eine Antwort und ein neues Problem zu lösen.

Ich habe eine Funktion erstellt, die nach allen Eingaben sucht - anhängen und die Größe entsprechend ihrer parent(). Width() ändern.

hier:

function sizeInputs() { 
    $(document).find(".input_app").each(function(){ 
    var container_width = $(this).parent().innerWidth(); 
    var btn_width = $(this).parent().find(".btn_app").width(); 
    // I don't know why but I need to add 25 here...??? 
    $(this).css('width', container_width-(btn_width + 25)); 
    }); 

Sie nur Klasse müssen Sie Ihre Eingabe ist als „.input_app“ und zugehörige Schaltfläche als „.btn_app“ und sie in einem div platzieren.

Dies funktioniert überall außer in Tabellen. Da die Tischbreite von der Elementbreite bestimmt wird, ist es das Ei und das Chicken Dilemma. Wenn Sie die Tabelle vergrößern, funktioniert es, aber wenn Sie die Breite verringern, tut es das nicht.

dies kann input-append

in Fiddle angesehen Alle werden Wenn jemand eine Idee hat, wie die Tabelle wird es Problem zu lösen, die Größe sehr geschätzt.

Answer 5

Dies ist eine reine CSS-Lösung, die für Layout-Zwecke funktioniert, keine böse jQuery/JavaScript.

http://jsfiddle.net/9Ma8V/

Die HTML

<div class="inline-button-input"> 
    <input type="submit" value="Submit"/> 
    <div> 
     <input type="text"/> 
    </div> 
</div> 

Die CSS

input[type=text] { 
    width: 100%; 
} 
.inline-button-input { 
    width: 100%; 
    float: right; 
} 
.inline-button-input div { 
    overflow: hidden; 
    padding-right: .5em; 
} 
.inline-button-input input[type=submit] { 
    float: right; 
}