Начальная загрузка Twitter — добавленные элементы ввода перекрываются при размещении рядом друг с другом

Я пытаюсь поместить два элемента ввода рядом друг с другом с добавленным элементом к первому вводу, используя стили отображения: таблицы. Однако это приводит к тому, что второй входной элемент перекрывает первый. Я безуспешно пытался использовать box-sizing: border-box. Похоже, проблема в том, что я ограничиваю ширину родительского элемента div, а затем устанавливаю ширину входного элемента на 100%, чтобы он заполнил родительский элемент, но это вообще не работает. Вот пример JSfiddle:

HTML

<div class="container">
    <div class="row">
        <div class="cell input-prepend">
            <span class="add-on">HI</span>
            <input type="text" />
        </div>
        <div class="cell">
            <input type="number"/>
        </div>
    </div>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.row {
    display: table-row;
    width: 100px;
}

input[type=text] {
    width: 100%;
}

.cell {
    display: table-cell;
}

http://jsfiddle.net/5pgPY/7/

Цель состоит в том, чтобы получить набор строк, подобных приведенному выше, где каждый экземпляр текстового ввода имеет некоторую метку, которая может иметь разную ширину, поэтому мне нужен какой-то способ убедиться, что все текстовые вводы выстраиваются в линию. Может быть, мне просто отказаться от использования добавленного элемента и использовать для этого отдельный div?


html css twitter-bootstrap textinput
person Ibrahim    schedule 17.02.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Не вижу, откуда берется проблема. Во всяком случае, это сработало для меня:

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.row {
    display: table-row;
    width: 200px;
}

input[type=text] {
    width: 100%;
}

.cell {
    margin-right: 60px;
    float: left;
}
person Fabian Lauer    schedule 17.02.2013
comment
Хм, добавление прав на поля действительно работает, я думаю, что это может быть правильным решением. - person Ibrahim; 17.02.2013
comment
Даже если это сработает в этом случае, я не уверен, что это скорее обходной путь, чем общее решение... - person Fabian Lauer; 17.02.2013
comment
Да, это обходной путь, но он более разумен, чем другое решение. Хотя мне очень хочется, чтобы это приложение сделало что-то экстремальное, спрятав поля ввода и проделав некоторые трюки с зеркалированием содержимого в div, потому что их размер и позиционирование действительно раздражают. - person Ibrahim; 17.02.2013

arrow_upward
1
arrow_downward

В вашем примере вы не использовали класс input-prepend во втором input , вы должны написать его следующим образом

<div class="cell input-prepend">
        <input type="number"/>
    </div>

И в css удалите ширину = 100% из ввода и используйте margin-right

    input[type=text] {
       margin-right:10px;

      }

Не могли бы вы проверить JSfidlle обновленный префикс JSfiddle

<div class="container">
<div class="row">
    <form class="form-inline">
        <input type="text" class="input-small" placeholder="Email">
        <input type="password" class="input-small" placeholder="Password">
    </form>
    <form class="form-inline">
        <input type="text" class="input-small" placeholder="Email">
        <input type="password" class="input-small" placeholder="Password">
    </form>
</div>
</div>
person Shail    schedule 17.02.2013
comment
Мне нужно, чтобы они были рядом друг с другом, вы пропустили эту часть вопроса или я что-то упустил? О, это зависит от ширины моего браузера ... На самом деле я этого не хочу, и я не понимаю, как вы будете складывать несколько строк этого, поэтому я не думаю, что это решит эту проблему. - person Ibrahim; 17.02.2013
comment
О, хм, я думаю, что несколько строк работают, но я не уверен, что понимаю, почему. Видите ли, когда вы пытаетесь ограничить ширину контейнера первого ввода, вы получаете ситуацию, о которой я говорил: jsfiddle.net/mh3hH/19 - person Ibrahim; 17.02.2013
comment
Видите ли, это потому, что размер браузера изменяется, и чтобы он соответствовал видимой области, все они складываются таким образом. Что вы можете сделать, так это написать медиа-запросы, а затем изменить их соответствующим образом, и ситуация будет решена наверняка. - person Shail; 17.02.2013
comment
давайте продолжим это обсуждение в чате - person Shail; 17.02.2013