Juicef Juicef - 1 month ago 14
HTML Question

Bootstrap grid bug?

I've succeeded to pin down an error in my code. Really weird I must say. Of course, before anyone says google it, I have hehehe. I simply want to know if this is a bug, and or if there is some solution to this.

I have a form in which I want to edit some content and send it to the server. The thing is, when I try to focus a field (click on it), I can't. It is disabled for some reason. Not only inputs, but select boxes and checkboxes as well. However, if I change the class of the div with the textarea as its child from col-sm-12 to col-sm-11 everithing works as it should. Now I don't want to use a column of size 11 when everything else can be 12. Looks just weird.

Here is my code:

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


Does anyone know anything about this?

Answer

I experienced this issue today. The text inputs would not focus on click, and the clearfix div did not work.

The solution was to wrap each col-xx-x in a div with a .row class. Ex:

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