html - salto - Bootstrap 3.0: ¿Cómo tener texto y entrada en la misma línea?

tooltip bootstrap salto de linea

Question

Actualmente estoy cambiando mi sitio web a Bootstrap 3.0. Tengo un problema con el ingreso de formularios y el formato de texto. Lo que funcionó en Bootstrap 2 no funciona en Bootstrap 3.

¿Cómo puedo obtener el texto en la misma línea antes y después de la entrada de un formulario? Lo reduje a un problema con la clase ''form-control'' en la versión Bootstrap 3 del ejemplo.

¿Cómo podría obtener todo el texto y la entrada en una línea? Me gustaría que el ejemplo de bootstrap 3 se parezca al ejemplo de bootstrap 2 en jsfiddle.

Ejemplo de JS Fiddle

<div class="container ">
  <form>
      <h3> Format used to look like this in Bootstrap 2 </h3>
      <div class="row ">
          <label for="return1"><b>Return:</b></label>
          <input id="return1" name=''return1'' class=" input input-sm" style="width:150px"
                 type="text" value=''8/28/2013''>
          <span id=''return1'' style=''color:blue''> +/- 14 Days</span>
      </div>

       <br>   
       <br>   
           <h3> BootStrap 3 Version </h3>

      <div class="row">
          <label for="return2"><b>Return:</b></label>
          <input id="return2" name=''return2'' class="form-control input input-sm" style="width:150px"
                 type="text" value=''8/28/2013''>
          <span id=''return2'' style=''color:blue''> +/- 14 Days</span>
      </div>
  </form>

Actualización: cambio el código a este que funciona pero tiene problemas con la alineación ahora. ¿Algunas ideas?

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

Answer 1

Directamente de la documentación getbootstrap.com/css/#forms-horizontal .

Utilice las clases de cuadrícula predefinidas de Bootstrap para alinear etiquetas y grupos de controles de formulario en un diseño horizontal al agregar .form-horizontal al formulario (que no tiene que ser un <form> ). Al hacerlo, cambia .form-groups para que se comporte como filas de cuadrícula, por lo que no es necesario .row .

Muestra:

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Answer 2

La forma en que lo resolví fue simplemente agregar una anulación para todos mis cuadros de texto en el CSS principal de mi sitio, así:

.form-control {
    display:initial !important;
}

Answer 3

Lo que necesitas es la clase .form-inline . Sin embargo, debe tener cuidado, con la nueva clase .form.inline debe especificar el ancho para cada control.

Eche un vistazo a esto

Answer 4

Ninguno de estos funcionó para mí, tuve que usar la .form-control-static .

http://getbootstrap.com/css/#forms-controls-static

Answer 5

O puedes hacer esto:

<table>
  <tr>
    <td><b>Return:</b></td>
    <td><input id="return1" name=''return1'' 
              class=" input input-sm" style="width:150px"
              type="text" value=''8/28/2013''></td>
  </tr>
</table>

Intenté cada una de las sugerencias anteriores y ninguna funcionó. No quiero elegir un número fijo de columnas en la cuadrícula de 12 columnas. Quiero el aviso y la entrada justo después, y quiero que las columnas se estiren según sea necesario.

Sí, lo sé, eso va en contra de lo que es el bootstrap. Y NUNCA debes usar una mesa. Porque DIV es mucho mejor que las tablas. Pero el problema es que las tablas, filas y celdas realmente FUNCIONAN.

SÍ - REALMENTE SÉ que hay fanáticos de CSS, y la reacción instintiva nunca es nunca usar TABLE, TR y TD. Sí, sé que DIV class = "table" con DIV class = "row" y DIV class = "cell" es mucho mejor. Excepto cuando no funciona, y hay muchos casos. No creo que las personas deban ignorar ciegamente esas situaciones. Hay momentos en que el TABLE / TR / TD funcionará bien, y no hay razón para usar un enfoque más complicado y más frágil solo porque se lo considera más elegante. Un desarrollador debe comprender cuáles son los beneficios de los diversos enfoques y las ventajas y desventajas, y no existe una regla absoluta de que los DIV sean mejores.

"Un ejemplo: en base a esta discusión, convertí unos pocos tds y trs existentes a divs. 45 minutos jugando con eso tratando de hacer que todo se alinee uno al lado del otro y me di por vencido. Los TD regresaron en 10 segundos más tarde - funciona - de inmediato - en todos los navegadores, nada más que hacer. Por favor, intente hacerme entender - ¡qué posible justificación tiene para querer que lo haga de otra manera! " Ver [ https://.com/a/4278073/1758051]

Y esto: "

El diseño debe ser fácil. El hecho de que haya artículos escritos sobre cómo lograr un diseño dinámico de tres columnas con encabezado y pie de página en CSS muestra que es un sistema de diseño deficiente. Por supuesto, puede hacer que funcione, pero hay literalmente cientos de artículos en línea sobre cómo hacerlo. No hay prácticamente tales artículos para un diseño similar con tablas porque es evidentemente obvio. No importa lo que digas en contra de las tablas y en favor de CSS, este hecho lo deshace todo: un diseño básico de tres columnas en CSS a menudo se llama "El Santo Grial". "[ https://.com/a/4964107/1758051]

Todavía tengo que ver una manera de obligar a los DIV a alinearse siempre en una columna en todas las situaciones. Sigo recibiendo ejemplos triviales que realmente no se topan con los problemas. "Sensible" se trata de proporcionar una forma en que no siempre se alinearán en una columna. Sin embargo, si realmente desea una columna, puede perder horas intentando que DIV funcione. Algunas veces, necesitas usar la tecnología apropiada sin importar lo que digan los fanáticos.

Answer 6

Pondría cada elemento que desea en línea dentro de un col-md- * div separado dentro de su fila. O fuerce sus elementos para mostrar en línea. La clase de control de formulario muestra bloque porque esa es la manera en que bootstrap cree que debería hacerse.

Answer 7

Puedes hacerlo así:

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputType" class="col-sm-2 control-label">Label</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="input" placeholder="Input text">
        </div>
    </div>
</form>

Fiddle

Answer 8

solo dale a la madre de div "class =" col-lg-12 ""

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

será

<div class="form-group">
<div class="col-lg-12">
  <div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
</div>
</div>

Answer 9

todos por favor revisen el código actualizado ya que tenemos que usar

 form-control-static not only form-control

http://jsfiddle.net/tusharD/58LCQ/34/

Gracias con saludos