Вопрос по twitter-bootstrap – Ввод-добавление жидкости в Bootstrap Responsive

14

Я изо всех сил пытался получить ввод с элементом input-append, чтобы иметь правильную ширину в текучем макете. Я использую Bootstrap версии 2.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>

enter image description here

enter image description here

Ваш Ответ

5   ответов
4

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

enter image description here

Large:

enter image description here

1

которое отлично работает, без неприятных 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;
}
-1

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

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

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

Все это можно посмотреть в Fiddleвход-Append

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

Вы не должны использовать код для достижения этой цели.
Если у вас есть вопрос, задайте вопрос.
11

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

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
2

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

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

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

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