1

¿Cómo puedo remover el espacio que existe entre el input y el button?

introducir la descripción de la imagen aquí

Este es mi código:

<div class="panel-body">
    <ul id="list_messages"></ul>
    <div class="row">
        <div class="col-md-6"> <!-- Si comento estas columnas simplemente mi input se pone por encima del button -->
            <input type="text" class="form-control" placeholder="Write a message">
        </div> <!-- -->
        <div class="col-md-6"> <!-- Si comento estas columnas simplemente mi input se pone por encima del button -->
          <button type="button" class="btn btn-block btn-primary">Send message</button>
       </div> <!-- -->
    </div>
</div>
1

4 respuestas 4

1

Lo que estás buscando se llama Button addons de Bootstrap.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="panel-body">
  <ul id="list_messages"></ul>
  <div class="row">
    <div class="col-xs-12">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Write a message">
        <span class="input-group-btn">
         <button type="button" class="btn btn-block btn-primary">Send message</button>
      </span>
      </div>
    </div>
  </div>
</div>


En cambio si quieres ahorrarte marcado puedes utilizar flexbox y crear tu propio componente.

  <div class="flex-input-group">
      <input type="text" class="form-control" placeholder="Write a message">
      <button type="button" class="btn btn-block btn-primary">Send message</button>
  </div>

.flex-input-group {
  display: flex;
}
.flex-input-group input,
.flex-input-group button {
  flex: 1;
  /* Distribuye el espacio entre los dos elementos. */
}
.flex-input-group input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  flex-grow: 5;
  /* Reduce este número para hacer el input más pequeño. Actualmente crece 5 veces si hay espacio en el contenedor */
}
.flex-input-group button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="panel-body">
  <ul id="list_messages"></ul>
  <div class="row">
    <div class="col-xs-12">
      <div class="flex-input-group">
        <input type="text" class="form-control" placeholder="Write a message">
        <button type="button" class="btn btn-block btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>


Inclusive puedes cambiar el orden de los elementos con la propiedad order.

.flex-input-group {
  display: flex;
}
.flex-input-group--inverted {
  display: flex;
}
.flex-input-group input,
.flex-input-group button {
  flex: 1;
  /* Distribuye el espacio entre los dos elementos. */
}
.flex-input-group input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  flex-grow: 5;
  /* Reduce este número para hacer el input más pequeño. Actualmente crece 5 veces si hay espacio en el contenedor */
}
.flex-input-group button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.flex-input-group--inverted input,
.flex-input-group button {
  border-radius: 4px;
}
.flex-input-group--inverted input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.flex-input-group--inverted button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  order: -1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="panel-body">
  <ul id="list_messages"></ul>
  <div class="row">
    <div class="col-xs-12">
      <div class="flex-input-group flex-input-group--inverted">
        <input type="text" class="form-control" placeholder="Write a message">
        <button type="button" class="btn btn-block btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

1

Sin cambiar el html tendrías que sobreescribir el estilo de bootstrap para eliminar el "gutter" de cada columna:

@media (min-width: 992px) {
  .panel-body > .row > .col-md-6:first-child {
    padding-right: 0;
  }

  .panel-body > .row > .col-md-6:nth-child(2) {
    padding-left: 0;
  }
}  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="panel-body">
    <ul id="list_messages"></ul>
    <div class="row">
        <div class="col-md-6"> <!-- Si comento estas columnas simplemente mi input se pone por encima del button -->
            <input type="text" class="form-control" placeholder="Write a message">
        </div> <!-- -->
        <div class="col-md-6"> <!-- Si comento estas columnas simplemente mi input se pone por encima del button -->
          <button type="button" class="btn btn-block btn-primary">Send message</button>
       </div> <!-- -->
    </div>
</div>

2
  • Tu ejemplo no me funciona y al ejecutarlo muestra el input encima del button
    – Jorius
    el 2 nov. 2016 a las 0:20
  • 1
    Si te fijas, es para resoluciones superiores a 992px, tal y como funciona bootstrap.
    – Shaz
    el 2 nov. 2016 a las 0:23
0

Lo que haría yo, solo con tal de no poner más css es:

  1. Mover la clase .row hacia los div internos
  2. Poner la clase .col-xs-12, .col-sm-12, .col-md-12 o .col-lg-12 (según el que estés usando, en este caso para que sea visible en este snippet uso .col-xs-12) en el lugar de la clase .row para respetar el padding de los laterales

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="panel-body">
    <ul id="list_messages"></ul>
    <div class="col-xs-12">
        <div class="row col-xs-6">
            <input type="text" class="form-control" placeholder="Write a message">
        </div> <!-- -->
        <div class="row col-xs-6">
          <button type="button" class="btn btn-block btn-primary">Send message</button>
       </div> <!-- -->
    </div>
</div>

1
  • Aunque tu solución funciona, no sigue las buenas prácticas de anidación de bootstrap.
    – Shaz
    el 2 nov. 2016 a las 1:02
0

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

<div class="row">
   <div class="col-lg-6">
  <div class="input-group">
     <input type="text" class="form-control" placeholder="Write a message">
     <span class="input-group-btn">
        <button class="btn btn-block btn-primary" width="100%" type="button">Send message</button>
     </span>
  </div><!-- /input-group -->
   </div><!-- /.col-lg-6 -->
</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.