Ввод жидкости - добавление в Bootstrap Responsive

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

<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>

Ответы

Ответ 1

Поскольку ваш 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% в соответствии со значениями по умолчанию.

Ответ 2

замените <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);

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

Small:

Large:

Ответ 3

Ответный css - это то, что срабатывает.

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

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

надеюсь, вы увидите, что происходит. Это даст вам достаточно надежно.

Ответ 4

Это чистое решение для 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;
}

Ответ 5

У меня есть ответ и новая проблема для решения.

Я создал функцию, которая будет искать все входные-добавлять и изменять их размеры в соответствии с их 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

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