Twitter bootstrap - Offset column containing a form input field overlays container border

Question

0.00/5 (No votes)

See more:

I'm currently using Twitter Bootstrap in an attempt to experiment with some responsive design. Using the code below I have been experimenting with the grid model and from my understanding of the documentation, all rows must have 12 columns in some way or other to ensure that responsive works correctly when scaling down to smaller devices. My issues is that when scaling down, the search input box I have placed in an offset column seems to overlap my container when I scale down into tablet sizing. I am using bootstrap with all options selected in the customisation pane meaning that responsive is included. Does anyone know why this issue is occurring, I thought Bootstrap had been designed to 'respond' to such issues?

HTML

<!DOCTYPE html>

<html>
<head>
    <title>Bootstrap Example</title>
    <meta name="viewport" content="width-device-width, initial-scale=1.0">
    <!--BOOTSTRAP-->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>

<body>
    <div class="container" style="border: 1px solid #cccccc">
        <div class="row">
            <div class="span4">This is a div spanning 4 columns</div>
            <div class="span6 offset2">This is a div spanning 6 columns. It should appear alongside the column spanning 4 columns.</div>
        </div>
        <div class="row">
            <div class="span4 offset8" style="border: 1px solid #ff0000">
                <form class="form-search">
                    <div class="row">
                        <div class="input-append span4">
                            <input type="text" class="input-medium search-query">
                            <button type="submit" class="btn btn-info"> Search </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>  
    </div>


</body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>

Posted 3-Jul-13 23:03pm

Jason Espin

Updated 3-Jul-13 23:05pm

v2

Add a Solution

Comments

vbmike 5-Jul-13 16:28pm

Try using a second css file from bootstrap called "bootstrap-responsive.css" in addition to the one you are calling and see if it yields better results for you. I would also suggest using one of the bootstrap templates and customizing to your taste just to learn how the thing works.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)