input - chips - tags bootstrap 4

Oreja. Entrada prependida y anexada. ¿Cómo maximizar el ancho del campo de entrada?

Question

Estoy usando Bootstrap de twitter. Lo que quiero es hacer un texto, un campo de entrada y un botón, pero quiero que mi campo de entrada tenga el ancho máximo disponible para que el borde derecho del botón de envío esté cerca del borde derecho del pozo. De la documentación de arranque se encuentra la clase .input-block-level que permite que cualquier elemento o elemento se comporte como un elemento de nivel de bloque, pero al aplicarlo a la entrada se obtiene el tamaño del pozo en la entrada central. http://jsfiddle.net/Uc4CE/

<div class="well">
<div class="input-prepend input-append">
  <span class="add-on">Some text</span>
  <input class="input" type="text" name="xxx" value="xxx" />
  <input type="hidden" name="next" value="xxx" />
  <input type="submit" value="xx" class="btn btn-info" />
</div>
</div>

Answer 1

Estaba buscando algo similar y esta solución de https://gist.github.com/mattjorn/5020957 funcionó para mí: agregue .input-block-level a su div exterior, por ejemplo,

<div class="input-prepend input-append input-block-level">

y luego extender el CSS bootstrap de esta manera:

.input-prepend.input-block-level {
  display: table;
  width: 100%;
}

.input-prepend.input-block-level .add-on {
  display: table-cell;
  background-color: white;
}

.input-prepend.input-block-level > input {
  box-sizing: border-box;
  height: 30px;
  display: table-cell;
  width: 100%;
  border-left-style: none;
}

Answer 2

Hay una solución para esto en la rama 3.0 de Twitter Bootstrap según el comentario de @ mdo sobre este problema .

Sin embargo, mientras tanto, uso el siguiente javascript en mis proyectos cuando django-crispy forms un diseño de django-crispy forms dentro de un <div class="span4"> . Esto explica los diseños sensibles.

ejemplo HTML

<div class="row-fluid">
    <div class="span4">
        {% crispy form %}
    </div>
</div>

style.css

/* I also set this to account for smaller widtsh */

form fieldset {
    width:100%
}

fix.js

NOTA: También desencadeno esto con el cambio de tamaño de la ventana.

función sizeInputs () {
var fw = $ (''fieldset de formulario''). innerWidth ();
$ (''form .input-prepend''). each (function () {$ (this) .children (''input''). css (''width'', fw - $ (this) .children (''. add-on'' ) .innerWidth ());}); };

$ (document) .ready (function () {sizeInputs ();});

$ (ventana) .resize (function () {sizeInputs ();});

Answer 3

puede usarse para div class="input-prepend input-append" margin-right estilo adicional margin-right

Resultado para su código:

<div class="well">
    <div class="input-prepend input-append" style="margin-right: 108px;">
        <span class="add-on">Some text</span>
        <input class="input-block-level" type="text" name="xxx" value="xxx" />
        <input type="hidden" name="next" value="xxx" />
        <input type="submit" value="xx" class="btn btn-info" />
    </div>
</div>

http://jsfiddle.net/Uc4CE/1/

Answer 4

EDITAR: tenga en cuenta que esta respuesta es válida para Bootstrap v2.3.x. Bootstrap 3 ya resuelve esto de forma nativa ( ver doc ).

Inspirado por la respuesta de A lee, aquí está mi solución algo mejorada (incluye tanto anexar como antepeso, el mínimo ancho de complemento posible, eliminar estilos innecesarios, altura automática ...). Incluya esto después de los archivos Bootstrap CSS / LESS:

.input-append.input-block-level,
.input-prepend.input-block-level {
  display: table;
}

.input-append.input-block-level .add-on,
.input-prepend.input-block-level .add-on {
  display: table-cell;
  width: 1%; /* remove this if you want default bootstrap button width */
}

.input-append.input-block-level > input,
.input-prepend.input-block-level > input {
  box-sizing: border-box; /* use bootstrap mixin or include vendor variants */
  -moz-box-sizing: border-box; /* for Firefox */
  display: table; /* table-cell is not working well in Chrome for small widths */
  min-height: inherit;
  width: 100%;
}

.input-append.input-block-level > input {
  border-right: 0;
}

.input-prepend.input-block-level > input {
  border-left: 0;
}

Úselo así en su HTML y recuerde, en este caso, debe usar a button de etiquetas y no button para sus botones:

<div class="input-append input-block-level">
  <input type="text" />
  <a class="btn add-on">click</a>
</div>

Edición: en IE8, si configura display: table en .input-append.input-block-level > input , la etiqueta de entrada no se puede editar a pesar de tomar el foco.

Omisión completa de esta display: parámetro hace que funcione como se esperaba en IE8 así como en Chrome / Safari / Firefox actual.