Ошибка загрузочной сетки?

Мне удалось зафиксировать ошибку в моем коде. Очень странно, что я должен сказать. Конечно, прежде чем кто-нибудь скажет об этом, я тоже. Я просто хочу знать, является ли это ошибкой, и если есть какое-то решение.

У меня есть форма, в которой я хочу отредактировать некоторый контент и отправить его на сервер. Дело в том, что когда я пытаюсь сфокусировать поле (нажмите на него), я не могу. По какой-то причине он отключен. Не только входные данные, но и флажки и флажки. Однако, если я изменю класс div с текстовым полем как его дочерний элемент из col-sm-12 в col-sm-11, то он будет работать как следует. Теперь я не хочу использовать столбец размером 11, когда все остальное может быть 12. Выглядит просто странно.

Вот мой код:

<form>
    <div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <label for="title" >Title</label>
    <input type="input" name="title" class="form-control" value="<?php echo $article['title'] ?>">
    </div>
    ...
    ...
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <label for="content" >content</label>
        <textarea name="content" class="form-control" rows="3"><?php echo $article['content'] ?></textarea>
    </div>
    <div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-2">
        <input type="submit" name="submit" class="btn btn-success form-control" value="Save!"/>
    </div>
...
</form>

Кто-нибудь знает что-нибудь об этом?

html,forms,twitter-bootstrap,

1

Ответов: 4


8 принят

Сегодня я испытал этот вопрос. Текстовые входы не будут фокусироваться на клике, а clearfix div не будет работать.

Решение заключалось в том, чтобы обернуть каждый col-xx-x в div с классом .row. Пример:

<div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <label for="content" >content</label>
        <textarea name="content" class="form-control" rows="3"></textarea>
    </div>
</div>

0

Я испытал ту же проблему. Не было .clearfix или обертывание каждого col-xx-x в div с классом row. Однако репликация тегов формы внутри div, содержащего класс строк, решила проблему.

<div class="row">
  <form>
    .
    .
    .
  </form>
</div>            
                


0

У меня такая же проблема, но не работаю после добавления строки div. Я добавляю этот код в стиль css для решения проблемы:

.col-md-12{ 
    width: 100% !important; 
}

добавить ко всем col-xx-12


0

Проблема в том, что есть div или какой-либо другой элемент, который перекрывает элементы управления вводами. Вы должны иметь возможность перейти к элементу ввода, даже если вы не можете щелкнуть по нему. Попробуйте посетить эту запись stackoverflow: форма Bootstrap 3 не работает на мобильных устройствах .

HTML, форма, твиттер-самозагрузка,
Похожие вопросы