bootstrap Eingabegruppe dynamische Breite

Wie kann ich Bootstrap Eingabegruppe Eingabeelement Breite dynamisch machen? Ich habe versucht, die Breite einzustellen: auto; aber die Eingabegruppe scheint immer noch eine festgelegte Breite zu haben.bootstrap Eingabegruppe dynamische Breite

<form class="col-sm-12 form-horizontal"> 
<div class="col-sm-6"> 
    <ul class="form-group list-inline list-unstyled"> 
    <li class="" ng-repeat="item in items"> 
     <div class="input-group list-item"> 
     <input type="text" readonly="" class="form-control" value="{{item}}" /> 
     <div class="input-group-btn"> 
      <button type="button" class="btn btn-default" ng-click="removeExpedition(item)"> 
      <span class="glyphicon glyphicon-remove"></span> 
      </button> 
     </div> 
     </div> 
    </li> 
    </ul> 
</div> 
</form>

und CSS:

.list-item>.input-group-btn { 
    width: auto; 
}

ist hier ein plunker zu demonstrieren. Sehen Sie alle Leerzeichen zwischen der Eingabe und der Schaltfläche. Ich hätte gerne den Button direkt neben dem Eingabeelement, mit einem gesetzten Padding.

Quelle

2016-12-05 rodney757

wenn ich Recht habe, brauchen Sie den Knopf, um 100% der Breite zu nehmen? –

Versuchen Sie folgendes:

.list-inline > li, .input-group { 
    width: 100%; 
}

Quelle

2016-12-05 16:32:11

Ich habe das ohne Glück versucht. die Eingangsgruppe geht auf 1 pro Zeile – rodney757

Vielleicht verstehe ich immer noch nicht. Möchten Sie alle Eingabegruppen in eine Zeile setzen? –

nicht unbedingt. Derzeit hat jede Eingabegruppe die gleiche Breite. Ich will das nicht. Ich möchte, dass jede Eingabegruppe nur so groß ist, wie sie für den Text und die Schaltfläche "X" benötigt wird. Ich muss den zusätzlichen Leerraum in jeder Eingabegruppe zwischen dem Text und dem "X" Knopf beseitigen. also die Eingabegruppe. Somit wäre die Eingabegruppe mit dem Text "3" nicht so breit wie die Eingabegruppe mit dem Text "And_one_more" – rodney757

wird in der Klasse in Bootstrap gebaut, dies zu tun. einfach auf die Schaltfläche Klasse geben (btn-block)

Quelle

2016-12-05 16:36:56

wo sollte ich sie hinzufügen? Scheint nicht in den Tasten – rodney757

zu li Elemente Stil display: block hinzufügen und fügen btn-block div.input-Gruppe Klasse, die alle

Quelle

2016-12-05 16:49:53 Joint

zu arbeiten scheint dies die Eingangsgruppe füllen die gesamte div machen – rodney757

Oh, jetzt verstehe ich was Sie erreichen wollen, können Sie dies nicht nur mit CSS oder BoostRap tun, alles was Sie brauchen ist dies: http://stackoverflow.com/questions/8100770/auto-scaling-inputtype-text-to-wid-of-value – Joint

in Ordnung ist, so konnte ich dies tun, indem Sie eine BTN-Gruppe mit anstelle einer Eingabegruppe. Die Eingabe wurde nur zum Anzeigen eines Werts verwendet, daher war dies nicht erforderlich. btn-group ist standardmäßig nur so breit wie der Text, den es enthält.

Quelle

2016-12-06 13:16:49 rodney757

bootstrap Eingabegruppe dynamische Breite

Antwort

Verwandte Themen