Agregar 2 inputs uno al lado del otro en la misma columna

publicado por: Anonymous

Estoy armando un formulario en Bootstrap, y quiero que en la misma fila y la misma columna haya 2 inputs, uno al lado del otro.

Probé con la clase input-group, con la que pude agregar botones y etiquetas a los inputs, pero cuando meto 2 inputs dentro de un input-group el segundo input pasa abajo del primero, y yo quiero que quede al lado del primero y pegado, como pasa con los input-group-addon.

¿Cómo se podrá lograr eso? En lo posible usando las clases propias de Bootstrap.

Esto es lo que tengo hasta ahora

_x000D_

_x000D_

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="col-xs-12 col-md-3">
  <div class="form-group">
    <label for="">Nro. remito</label>
    <div class="input-group">
      <input name="remitosucursal" id="remitosucursal" type="text" required class="form-control">
      <input name="remitonumero" id="remitonumero" type="text" required class="form-control">
    </div>
  </div>
</div>

_x000D_

_x000D_

_x000D_

solución

Una opción sería añadir un input-group-addon entre los campos y dejar que Bootstrap se encargue de los estilos.

_x000D_

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">_x000D_
_x000D_
<div class="container">_x000D_
  <div class="row">_x000D_
    <div class="col-xs-12 col-md-3">_x000D_
      <div class="form-group">_x000D_
        <label for="">Nro. remito</label>_x000D_
        <div class="input-group">_x000D_
          <input name="remitosucursal" id="remitosucursal" type="text" required class="form-control" placeholder="Sucursal">_x000D_
          <span class="input-group-addon">-</span>_x000D_
          <input name="remitonumero" id="remitonumero" type="text" required class="form-control" placeholder="Numero">_x000D_
        </div>_x000D_
      </div>_x000D_
    </div>_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Otra opción si no quieres añadir input-group-addon, sería crear estilos propios (aunque no sé si eso es lo que quieres por lo que dices en la pregunta). Aquí dejo un ejemplo:

_x000D_

_x000D_

.two-fields {_x000D_
  width:100%;_x000D_
}_x000D_
.two-fields .input-group {_x000D_
  width:100%;_x000D_
}_x000D_
.two-fields input {_x000D_
  width:50% !important;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">_x000D_
_x000D_
<div class="container">_x000D_
  <div class="row">_x000D_
    <div class="col-xs-12 col-md-3">_x000D_
      <div class="form-group two-fields">_x000D_
        <label for="">Nro. remito</label>_x000D_
        <div class="input-group">_x000D_
          <input name="remitosucursal" id="remitosucursal" type="text" required class="form-control" placeholder="Sucursal">_x000D_
          <input name="remitonumero" id="remitonumero" type="text" required class="form-control" placeholder="Numero">_x000D_
        </div>_x000D_
      </div>_x000D_
    </div>_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *