Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

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

Автор вопроса: Toby CroninОтветов: 5

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

Ответы

Ответ 1 · рейтинг 11 · Sherbrow

Поскольку ваш 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 · рейтинг 4 · baptme

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

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

Маленький:

Большой:

Ответ 3 · рейтинг 2 · Declan Cook

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

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

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

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

Ответ 4 · рейтинг 1 · sidneydobber

Это решение на чистом 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 · рейтинг -1 · fled

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

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

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

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы