Жидкий ввод-добавление в Bootstrap Responsive

Я изо всех сил пытался получить ввод с элементом ввода-добавления, чтобы иметь правильную ширину в гибком макете. Я использую Bootstrap v2.0.4. Когда я изменяю размер, чтобы сделать страницу меньше, она переходит на новую строку. В идеале я бы вводил всю ширину колодца (например, предупреждения). Я включил разметку и несколько скриншотов ниже. Любая помощь высоко ценится!

<div class="row-fluid">
    <div class="span3 well">
       <form class="form-horiztonal">
           <h2>Filters</h2>
           <fieldset>
               <div class="control-group">
                   <label class="control-label" for="msisdn">MSISDNs</label>
                   <div class="controls">
                       <div class="input-append">
                           <input class="span10" id="msisdn" size="" type="text" name="msisdn"><button
                           class="btn btn-primary" type="submit"><i class="icon-plus icon-white"></i></button>
                       </div>
                   </div>
                </div>
           </fieldset>
       </form>
    </div>

    <div class="span9"></div>
</div>

введите здесь описание изображения

введите здесь описание изображения


twitter-bootstrap
person Toby Cronin    schedule 25.06.2012    source источник

Ответы (5)


arrow_upward
11
arrow_downward

Поскольку ваш input — это .span10, кнопка должна быть .span2.

<div class="input-append">
    <input class="span10" id="msisdn" size="" type="text" name="msisdn"><button class="btn btn-primary span2" type="submit"><i class="icon-plus icon-white"></i></button>
</div>

Но поведение кнопки кардинально меняется. Вы можете исправить это с помощью этого css:

.input-append .btn {
    float: none!important;
    margin-left: 0!important;
}

И, чтобы быть еще более точным, кнопка должна быть размером с .span2 плюс fluidGridGutterWidth. Это width: 17.02127659% согласно значениям по умолчанию.

person Sherbrow    schedule 25.06.2012

arrow_upward
4
arrow_downward

заменить <form class="form-horiztonal"> на <form id="formfilters" class="form-horiztonal">

Добавьте следующий код jQuery.

function sizing() {
  var formfilterswidth=$("#formfilters").width();
  $("#msisdn").width((formfilterswidth-46)+"px");
}
$(document).ready(sizing);
$(window).resize(sizing);​

И это всегда хорошо выглядит

Маленький:

введите здесь описание изображения

Большой:

введите здесь описание изображения

person baptme    schedule 25.06.2012

arrow_upward
2
arrow_downward

Отзывчивый css — это то, что сбивает с толку.

Переопределив некоторые адаптивные css, используя

  #msisdn {
    width: 75%;
    display: inline-block;
  }

надеюсь, вы видите, что происходит. Надеюсь, это приблизит вас достаточно близко.

person Declan Cook    schedule 25.06.2012

arrow_upward
1
arrow_downward

Это решение на чистом CSS, которое отлично работает, без неприятных jQuery/JavaScript для макетирования.

http://jsfiddle.net/9Ma8V/

HTML

<div class="inline-button-input">
   <input type="submit" value="Submit"/>
   <div>
      <input type="text"/>
   </div>
</div>

CSS

input[type=text] {
   width: 100%;
}
.inline-button-input {
   width: 100%;
   float: right;
}
.inline-button-input div {
   overflow: hidden;
   padding-right: .5em;
}
.inline-button-input input[type=submit] {
   float: right;
}
person sidneydobber    schedule 17.05.2014

arrow_upward
-1
arrow_downward

У меня есть ответ и новая проблема, которую нужно решить.

Я создал функцию, которая будет искать все входные добавления и изменять их размер в соответствии с их parent().width().

Здесь:

  function sizeInputs() {
  $(document).find(".input_app").each(function(){  
    var container_width = $(this).parent().innerWidth();
    var btn_width = $(this).parent().find(".btn_app").width();
    // I don't know why but I need to add 25 here...???
    $(this).css('width', container_width-(btn_width + 25));  
  });

Вам нужно только классифицировать свой ввод как «.input_app» и связанные кнопки как «.btn_app» и поместить их в div.

Это работает везде, кроме таблиц. Поскольку ширина таблицы определяется шириной ее элемента, это дилемма яйца и курицы. Если вы увеличиваете таблицу, это работает, но если вы уменьшаете ее ширину, это не так.

Все это можно посмотреть в Fiddle input-append

Если у кого-то есть идеи о том, как решить проблему изменения размера таблицы, это будет очень признательно.

person fled    schedule 22.12.2012
comment
Если у вас есть вопрос, чтобы задать, то задайте вопрос. - person david.pfx; 17.05.2014