Alinee verticalmente el cuadro de texto usando clases de bootstrap -- ss campo con twitter-bootstrap camp Relacionados El problema

vertically align textbox using bootstrap classes


0
vote

problema

Español

He hecho 5 filas usando Bootstrap, se colocaron perfectamente, pero hay un pequeño problema. Las filas están entrando en contacto sin dejar ninguna brecha. No debería usar
, esto traerá una gran brecha, y los cuadros de texto en cada fila deben alinearse verticalmente, si no hay un botón de radio en esa fila, ese lugar correspondiente debe mantenerse vacío y el cuadro de texto debe alinearse correctamente. con todas las filas. El cuadro de texto inicial en todas las filas debe comenzar en el mismo lugar donde se inició el cuadro de texto de la primera fila. Aquí está mi código

      <div class="container">     <div class="row">         <div class="col-xs-12">             <div class="form-inline">                 <div class="radio" style="width: 100px;">                     <label><input type="radio" name="optradio">Option                         1</label>                 </div>                 <input type="text" class="form-control" />              </div>         </div>     </div>      <div class="row">         <div class="col-xs-12">             <div class="form-inline">                 <div class="radio" style="width: 100px;">                     <label><input type="radio" name="optradio">Option                         1</label>                 </div>                 <input type="text" class="form-control" /> <input type="text"                     class="form-control" />                 <div class="form-group">                     <label for="sel1">Select list:</label> <select                         class="form-control" id="sel1">                         <option>Apple</option>                         <option>Mango</option>                         <option>Orange</option>                     </select>                 </div>             </div>         </div>     </div>      <div class="row">         <div class="col-xs-12">             <div class="form-inline">                 <input type="text" class="form-control" /> <input type="text"                     class="form-control" /> <input type="text" class="form-control" />                 <input type="text" class="form-control" /> <input type="text"                     class="form-control" />             </div>         </div>     </div>     <div class="row">         <div class="col-xs-12">             <div class="form-inline">                 <div class="radio" style="width: 100px;">                     <label><input type="radio" name="optradio">Option                         1</label>                 </div>                 <input type="text" class="form-control" /> <input type="text"                     class="form-control" />                 <div class="form-group">                     <label for="sel1">Select list:</label> <select                         class="form-control" id="sel1">                         <option>Apple</option>                         <option>Mango</option>                         <option>Orange</option>                     </select>                 </div>             </div>         </div>     </div>      <div class="row">         <div class="col-xs-12">             <div class="form-inline">                 <input type="text" class="form-control" /> <input type="text"                     class="form-control" /> <input type="text" class="form-control" />                 <input type="text" class="form-control" /> <input type="text"                     class="form-control" />             </div>         </div>     </div> </div>    

Por favor, consulte el navegador que no esté en Fiddle porque cambia de alineación.

Original en ingles

I've made 5 rows using bootstrap, they got placed neatly, but there is a small issue. The rows are getting in contact without leaving any gap. I should not use
, this will bring a big gap, and the textboxes in each row should be vertically align, if there is no radio button in that row, that corresponding place should be kept empty and textbox should get aligned properly with all rows. The starting textbox in all rows should start at the same place where the first row textbox has started. Here is my code

    <div class="container">     <div class="row">         <div class="col-xs-12">             <div class="form-inline">                 <div class="radio" style="width: 100px;">                     <label><input type="radio" name="optradio">Option                         1</label>                 </div>                 <input type="text" class="form-control" />              </div>         </div>     </div>      <div class="row">         <div class="col-xs-12">             <div class="form-inline">                 <div class="radio" style="width: 100px;">                     <label><input type="radio" name="optradio">Option                         1</label>                 </div>                 <input type="text" class="form-control" /> <input type="text"                     class="form-control" />                 <div class="form-group">                     <label for="sel1">Select list:</label> <select                         class="form-control" id="sel1">                         <option>Apple</option>                         <option>Mango</option>                         <option>Orange</option>                     </select>                 </div>             </div>         </div>     </div>      <div class="row">         <div class="col-xs-12">             <div class="form-inline">                 <input type="text" class="form-control" /> <input type="text"                     class="form-control" /> <input type="text" class="form-control" />                 <input type="text" class="form-control" /> <input type="text"                     class="form-control" />             </div>         </div>     </div>     <div class="row">         <div class="col-xs-12">             <div class="form-inline">                 <div class="radio" style="width: 100px;">                     <label><input type="radio" name="optradio">Option                         1</label>                 </div>                 <input type="text" class="form-control" /> <input type="text"                     class="form-control" />                 <div class="form-group">                     <label for="sel1">Select list:</label> <select                         class="form-control" id="sel1">                         <option>Apple</option>                         <option>Mango</option>                         <option>Orange</option>                     </select>                 </div>             </div>         </div>     </div>      <div class="row">         <div class="col-xs-12">             <div class="form-inline">                 <input type="text" class="form-control" /> <input type="text"                     class="form-control" /> <input type="text" class="form-control" />                 <input type="text" class="form-control" /> <input type="text"                     class="form-control" />             </div>         </div>     </div> </div>  

Please check in browser not in fiddle because it changes alignments .

     

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

  null5  

Aquí está jsfiddle

 

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>      <div class="container">      <div class="row">          <div class="col-xs-12">              <div class="form-inline form-group">                  <div class="radio" style="width:95px;" >                      <label><input type="radio" name="optradio" style="vertical-align:middle;"> &nbsp; Option                          1</label>                  </div>                  <input type="text" class="form-control" />                </div>          </div>      </div>        <div class="row">          <div class="col-xs-12">              <div class="form-inline form-group">                  <div class="radio" style="width:95px;" >                      <label><input type="radio" name="optradio">Option                          1</label>                  </div>                  <input type="text" class="form-control" /> <input type="text"                      class="form-control" />                  <div class="form-group">                      <label for="sel1">Select list:</label> <select                          class="form-control" id="sel1">                          <option>Apple</option>                          <option>Mango</option>                          <option>Orange</option>                      </select>                  </div>              </div>          </div>      </div>        <div class="row">          <div class="col-xs-12 col-md-offset-1">              <div class="form-inline form-group">                              <input type="text" class="form-control" /> <input type="text"                      class="form-control" /> <input type="text" class="form-control" />                  <input type="text" class="form-control" /> <input type="text"                      class="form-control" />              </div>          </div>      </div>      <div class="row">          <div class="col-xs-12">              <div class="form-inline form-group">                  <div class="radio" style="width:95px;">                      <label><input type="radio" name="optradio">Option                          1</label>                  </div>                  <input type="text" class="form-control" /> <input type="text"                      class="form-control" />                  <div class="form-group">                      <label for="sel1">Select list:</label> <select                          class="form-control" id="sel1">                          <option>Apple</option>                          <option>Mango</option>                          <option>Orange</option>                      </select>                  </div>              </div>          </div>      </div>        <div class="row">          <div class="col-xs-12 col-md-offset-1">              <div class="form-inline form-group">                  <input type="text" class="form-control" /> <input type="text"                      class="form-control" /> <input type="text" class="form-control" />                  <input type="text" class="form-control" /> <input type="text"                      class="form-control" />              </div>          </div>      </div>  </div> 

Here is JSFIDDLE

 
 
         
         

Relacionados problema

12  El menú Bootstrap desaparece después del primer clic, configurando el estilo UL para ninguno  ( Bootstrap menu disappears after first click setting the ul style to none ) 
Estoy tratando de hacer una nueva plantilla de WordPress con bootstrap. El menú desplegable no funciona correctamente. Después del segundo clic, se muestra: N...

0  Mesa de bootstrap desbordando los padres CSS  ( Bootstrap table overflowing parent css ) 
Tengo una fila de bootstrap que contiene entre otras cosas un div con una mesa dentro. Por una razón desconocida, no puedo lograr que la mesa deje de desborda...

0  ¿Cómo crear una barra de navegación con 2 menú de colapso? [duplicar]  ( How to create a navbar with 2 collapse menu ) 
Esta pregunta ya tiene respuestas aquí : consolidate múltiple bootstrap 3 menús de navatura en colap...

2  Las pestañas de Bootstrap, altura izquierda  ( Bootstraps tabs left height ) 
Utilizo las pestañas de Bootstrap con tabs-left6 clase. Sin embargo, si el contenido de un lo suficientemente grande, la frontera entre el menú y el conteni...

0  Twitter Bootstrap - Margen izquierdo y derecho en IE  ( Twitter bootstrap left and right margin in ie ) 
Estoy usando el último bootstrap de Twitter. Estoy en una etapa temprana para diseñar mi sitio. El problema es, cuando veo el sitio en otros navegadores, ex...

0  Crea un diseño de fluido como bootstrap  ( Create fluid layout like bootstrap ) 
Soy nuevo en HTML / CSS, así que probablemente estoy volviendo a bolsa. Estoy usando Bootstrap, pero el primer día lo usa. Estoy tratando de imitar exactament...

3  ¿Cómo puedo personalizar el bootstrap sin perder los cambios?  ( How can i customise bootstrap without losing the changes ) 
Estoy usando Bower para administrar bootstrap y me gustaría hacer algunos cambios (colores, tamaño de fuente, etc.) a la apariencia de bootstrap predeterminad...

1  Bootstrap Typeahead.js elimina el contenido de los datos existentes en el campo de formulario HTML OnLeave  ( Bootstrap typeahead js deletes content of existing data in html form field onlea ) 
Estoy usando Typeahead en un formulario que ya tiene datos. El problema es: cuando entro y luego deje el campo sin escribir nada, está vaciado por Typehead. ...

7  ¿Cuál es el signo más antes de una función? [duplicar]  ( What is the plus sign before a function ) 
Esta pregunta ya tiene respuestas aquí : Javascript Signo más frente a la expresión de la función ...

-4  Bootstrap Carousel Slider La capacidad de respuesta no funciona  ( Bootstrap carousel slider responsiveness is not working ) 
Hola He usado Bootstrap Carousel Slider en My Slider, pero la capacidad de respuesta móvil no funciona. Aquí está mi código: <div class="mobileimage"> <...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos