Warum Eingang und Taste nicht nebeneinander stehen?

Ich möchte die Schaltfläche neben dem Eingabefeld hinzufügen.Warum Eingang und Taste nicht nebeneinander stehen?

<div class="form-group row"> 
           <label for="imageidVal" class="col-md-1 control-label pull-left text-nowrap">Image Id:</label> 
           <div class="col-md-3 "> 
            <input type="text" class="form-control" id="imageidVal" name="imageidVal" readonly="readonly" placeholder="Image Id" value='<jsp:getProperty property="imageID" name="adminObj"/>'> 
           </div> 

           <label for="cntridVal" class="col-md-1 control-label pull-left text-nowrap">Center Id:</label> 
           <div class="col-md-3 "> 
            <input type="text" class="form-control" id="cntridVal" name="cntridVal" placeholder="Center Id" value='<jsp:getProperty property="cntr_id" name="adminObj"/>'> 
            <button type="submit" class="btn btn-primary form-control" data-toggle="modal" data-target="#myModal" id = "searchCntrBtn" name="searchCntrBtn" onclick="getCntrDetails()">...</button> 

    </div>     
</div>

Quelle

2017-07-24 Ravikanth

Ich würde Ihre Formatierung korrigieren - dieses Ausschneiden und Einfügen-Snippet, das Sie haben, ist ziemlich schwer zu lesen. Ich würde versuchen, die 'form-group' auf ein Eltern-div zu verschieben und einfach nur die' row'-Klasse zu haben und zu sehen, wie weit Sie das bringt, so wie sie es in den Dokumenten gibt: http://getbootstrap.com/css/# forms-control-sizes unter Spaltengröße. – kuanb

nein .. nach dem Entfernen der funktioniert auch nicht. die gleiche Anzeige geben – Ravikanth

.form-control zwingt ein Element 100% der verfügbaren Breite aufzunehmen. Sie verwenden dies auf der <input> und Schaltfläche. Sie gehen zu müssen, um den Code neu zu formatieren, das Problem zu adressieren ... entweder durch eine andere .col für die Schaltfläche erstellen, oder durch die Verwendung von Bootstrap der Eingangsgruppe Komponente machen:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="form-group row"> 
 
\t <label for="imageidVal" class="col-xs-2 control-label pull-left text-nowrap">Image Id:</label> 
 
\t <div class="col-xs-4"> 
 
\t \t <input type="text" class="form-control" id="imageidVal" name="imageidVal" readonly="readonly" placeholder="Image Id" value='<jsp:getProperty property="imageID" name="adminObj"/>'> 
 
\t </div> 
 

 
\t <label for="cntridVal" class="col-xs-2 control-label pull-left text-nowrap">Center Id:</label> 
 
\t <div class="col-xs-4"> 
 
\t \t <div class="input-group"> 
 
\t \t \t <input type="text" class="form-control" id="cntridVal" name="cntridVal" placeholder="Center Id" value='<jsp:getProperty property="cntr_id" name="adminObj"/>'> 
 
\t \t \t <span class="input-group-btn"> 
 
\t \t \t \t <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#myModal" id = "searchCntrBtn" name="searchCntrBtn" onclick="getCntrDetails()">...</button> 
 
\t \t \t </span> 
 
\t \t </div> 
 
\t </div>     
 
</div>

Quelle

2017-07-24 19:58:35

Danke, Robert. – Ravikanth

Warum Eingang und Taste nicht nebeneinander stehen?

Antwort

Verwandte Themen