Как posicionar кнопка справа от неудара в лунку file в колонне таблицы bootstrap?

У меня есть ошибка в таблице в Bootstrap 3. Таблица имеет 3 inputs линией (имя + rut + я храню в архиве) и хочу поместить кнопку удаления линии в каждой линии таблицы тотчас после последнего неудара в лунку (type file), меньше в первой линии (потому что нужно определять по крайней мере линию), но у меня остается кнопка под неударом в лунку file не в правую сторону, как я это хочу. Тогда: что будет тем, что он перемещает, что кнопка у меня не остается в правой стороне неудара в лунку file?. Их присоединило задержание таблицы. Кто-то знает, что он может быть?

Я издал padding последней колонны в полет, но все же кнопка не поднимается справа от неудара в лунку file.

imagen de la tabla en cuestión

Сначала, что совсем спасибо за Ваши вклады. Первая линия существует всегда в грузе DOM, а именно у таблицы изначально есть Ваш заголовок и единственная линия (у которой нет кнопки удалять линию). Остальные линии присоединяются dinamicamente, когда Линия нажимает на кнопку Agregar. Я оставляю им код таблицы и блока jQuery, что создает каждую линию. С другой стороны я не думаю, что это проблема остального места в ячейке таблицы, потому что я попытался создавая ту же кнопку в колонне rut (у которой есть больше место) и оно перемещает то же самое, а именно, кнопка - posicionado внизу неудара в лунку или в новой линии. Во все это кнопка, если это элемент anchor с классом btn btn-danger.

/* inicio del bloque que agrega una fila a la tabla */
     
     var conteo = 1;
     $("#add_row").click(function() {
      
   if(conteo<10 ||   $('.ruttabl1').length < 10) {
            
$('#tab_logic').append('<tr id="addr'+(conteo)+'"></tr>');
$('#addr'+conteo).html("<td class='order'>"+ (conteo) +"</td> <td>  <div class='form-group has-feedback col-md-12'> <input name='nombres_s1t1_array["+conteo+"]' id='nombre_s1t1_"+conteo+"' type='text' placeholder='Ingrese nombre completo' class='form-control txtVal' required><span class='glyphicon form-control-feedback' id='nombre_s1t1_"+conteo+1+"'></span></div></td> <td> <div class='form-group has-feedback col-md-10'> <input name='ruts_s1t1_array["+conteo+"]' id='rut_s1t1_"+conteo+"' type='text' maxlength='12' placeholder='Ingrese RUT' class='form-control ruttabl1' required> <span class='glyphicon form-control-feedback' id='rut_s1t1_"+conteo+1+"'></span></div></td> <td> <div class='form-group has-feedback col-md-11'><input type='file' id='archivo_s1t1_array"+conteo+"' name='archivo_s1t1_array["+conteo+"]' required> <span class='glyphicon form-control-feedback' id='archivo_s1t1_array"+conteo+1+"'></span> <a class='btn-remove-tr btn btn-danger' style='float:left'>Eliminar fila</a>  <div id='errorBlock"+conteo+"' class='help-block'></div>  <span id='fileErrorValidMsg"+conteo+"' class='file-val-error'></span><br><span style='color:red'></span> </div> </td>"); 
                          
   conteo++;
            
  /* inicio actualizacion numeros de filas */ 
   if($('#tab_logic tr').length > 1) {
      $(this).closest('tr').remove();
      $('#tab_logic td.order').text(function (i) {  return i + 1; });
                     }
  /* fin actualizacion numeros de fila */
                     
       }
 
   
    });
    
/* cierre del bloque que agrega una fila a la tabla */

  /* inicio bloque de eliminación de fila de la tabla */

     
        var i = $('#tab_logic tr').length;
        $('#tab_logic').on('click', '.btn-remove-tr', function(e) {
        e.preventDefault();
                
        if($('#tab_logic tr').length>1) {
            $(this).closest('tr').remove();
            $('td.order').text(function (i) {
                return i + 1;
            });
        }
        
        if($('#tab_logic tr').length<10) { $('#add_row').show();  }
        return false;
        });
  /* fin bloque de eliminación de fila de la tabla */
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.js">
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- inicio tabla  -->
                                

   <div class="row clearfix ">
    
      
           <div class="col-md-12 column">
            <label class="control-label"><p><small>5. Nombre(s) y RUTs y Archivos (*)</small></p></label>
                <table class="table table-bordered table-hover table-striped table-sm" id="tab_logic" cellspacing="0" width="100%">

                   
                    <thead class="thead-inverse bg-primary">
                        <tr class="cabecera">
                            <th class="text-center"><p>#</p></th>
                            <th class="text-center"><p>Nombre Completo (*)</p></th>
                            <th class="text-center"><p>RUT (*)</p></th>
                            <th class="text-center">
                            <p>
                                Adjuntar documento (*)
                                </p>
                            </th>
                            
                        </tr>
                    </thead>
                    <tbody>
                       
                    <tr id="addr0">
                        <td class="order">
                        1
                        </td>
                        <td>
                          <div class="form-group has-feedback col-md-12">
                              <input type="text"  id="nombre_s1t1_0" name="nombres_s1t1_array[0]" placeholder="Ingrese nombre completo" class="form-control" required>
                              <span class="glyphicon form-control-feedback" id="nombre_s1t1_01"></span>
                          </div>
                        </td>

                     
                        <td>
                      
                            <div class="form-group has-feedback col-md-10">
                            <input type="text" name="ruts_s1t1_array[0]" id="rut_s1t1_0" placeholder="Ingrese RUT" maxlength="12" class="form-control ruttabl1" required>  

                            <span class="glyphicon form-control-feedback" id="rut_s1t1_01"></span> 

                      
                              </div>     
                        </td>

                        <td>

                            <div class="form-group has-feedback col-md-11">
                              <input type="file" id="archivo_s1t1_array0" name="archivo_s1t1_array[0]" required>

                              <div id="errorBlock0" class="help-block"></div>
                              <span id="fileErrorValidMsg0" class="file-val-error"></span>
                          
                            </div>

                        </td>

                    </tr>
                  
                                       
                </tbody>
                </table>
        </div>
    </div>
                   
                               
        <div style="float:right">
          <a id="add_row" class="btn btn-primary addnewrow pull-left">Agregar fila
            <span class="glyphicon glyphicon-plus"></span>
          </a> 
        </div>


        </br> </br>
<!-- fin tabla -->
2
задан 27.12.2016, 20:54
0 ответов

Ты мог бы тестировать asignadoles процентное содержание в колонны давая ему больший размер колонне, который ты хочешь занять, и другое решение было бы распределяя внутри колонны следующее

<div class="row">
     <div class="col-xs-8">Primer input</div>
     <div class="col-xs-4">Segundo input</div> 
</div>
3
ответ дан 03.12.2019, 17:58

Проверь эти примеры :-) я надеюсь, что они тебе полезны.

<link href="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>File</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>
        <div class="col-xs-8">
          <input id="Examinar" type="text" class="form-control col-xs-6" name="Examinar" placeholder="Seleccione un archivo" />
        </div>
        <button type="button" class="btn btn-default col-xs-2">Examinar</button>
        <button type="button" class="btn btn-primary col-xs-2">Boton 2</button>
      </td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>
        <div class="col-xs-8">
          <input id="Examinar" type="text" class="form-control col-xs-6" name="Examinar" placeholder="Seleccione un archivo" />
        </div>
        <div class="col-xs-4">
          <div class="btn-group btn-group-justified">
            <div class="btn-group">
              <button type="button" class="btn btn-default">Examinar</button>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-primary">Boton 2</button>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>
        <div class="col-xs-6">
          <input id="Examinar" type="text" class="form-control col-xs-6" name="Examinar" placeholder="Seleccione un archivo" />
        </div>
        <button type="button" class="btn btn-default col-xs-3">Examinar</button>
        <button type="button" class="btn btn-primary col-xs-3">Boton 2</button>
      </td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>
        <div class="input-group">
          <input id="Examinar" type="text" class="form-control" name="Examinar" placeholder="Seleccione un archivo" />
          <span class="input-group-addon btn btn-default">Examinar</span>
          <span class="input-group-addon btn btn-primary">Boton 2</span>
        </div>
      </td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>
        <div class="input-group col-xs-8">
          <input id="Examinar" type="text" class="form-control" name="Examinar" placeholder="Seleccione un archivo" />
          <span class="input-group-addon btn btn-default">Examinar</span>
          <span class="input-group-addon btn btn-primary">Boton 2</span>
        </div>
      </td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
    </tr>
  </tbody>
</table>
3
ответ дан 03.12.2019, 17:58

Сначала ты должен уверять, что твой неудар в лунку у них нет установленного размера. из-за которого so он может вызывать, что твоя кнопка загрузилась по умолчанию responsi...

но я думаю, что это может помогать тебе.

в твои две кнопки agragale установленный style. пример

< button class="btn btn-default btn-sm" style="display: inline-block;">botones de prueba</button>

< button class="btn btn-default btn-sm" style="display: inline-block;">botones de prueba</button>

и он был бы должен оставаться, как ты хочешь. привет

2
ответ дан 03.12.2019, 17:58
  • 1
    Если он использует bootstrap, я думаю, что он более рекомендуемый, использовать классы и доброту того же самого и не делать вещи " в pie" –  27.12.2016, 10:34

Ты можешь использовать класс того же bootstrap та же самая группирует тебе кнопки и тебя выполняет lineado тех же самых

<div class="btn-group">
  <button type="button" class="btn btn-default">Izquierdo</button>
  <button type="button" class="btn btn-default">Central</button>
  <button type="button" class="btn btn-default">Derecho</button>
</div>
1
ответ дан 03.12.2019, 17:58

Смотри посмотрим в css элемент, к которому ты относишься posicionar, у него есть свойство display:block; старайся менять это в display:inline-block;

Здесь у тебя есть больше info:

https://librosweb.es/referencia/css/display.html

Удостоверься также в, у которого есть свойство float:left; он мог бы подавать тебе для posicionar элементы в линии.

Хотя проблема могла бы быть благодаря тому, что кнопка просто не помещается точно за, где ты хочешь разместить это, и поэтому вытекает из контейнера.

То же самое ты было бы более практическим вместо того, чтобы добавлять слишком много текст к кнопке, единственная X добавляет.

Следующий раз старается включать в твой вопрос что-то из кода, хотя это будет css, который ты стараешься изменять.

Привет

1
ответ дан 03.12.2019, 17:58
  • 1
    Действительно проблема в этом случае кажется ясно, что элемент не помещается в доступном месте и поэтому отпускает следующую lí nea. Действительно я не думаю, что использовать свойство float:left - возможная одна solució n, так как назначенные по умолчанию input - элементы inline и, следовательно, если есть доступное место, pondrá n в той же lí nea, если есть доступное место. –  27.12.2016, 09:43
  • 2
    Конечно, но bootstrap он характеризуется тем, что responsive, я не очень помещен в bootstrap правды. –  27.12.2016, 18:57
  • 3
    Sí проблема состоит в том, что элементы неудар в лунку - inline и следовательно не могут получать ширину. Конечно, заметка, он inline-block не inline:block. –  27.12.2016, 19:00
  • 4
    Верный, давайте исправлять это, большое спасибо!! –  27.12.2016, 19:01

Теги

Похожие вопросы