Bootstrap: Rows/Cols Layout Issue

Question

I want my layout to look just like I have it in screenshot 1, but I want the extra space in the middle (which I made a blank col-sm-5), to be a buffer, so that the login form doesn't compress and get all messed up when the browser size gets changed (screenshot 2). I also have the problem of "re-adjusted" inner rows/cols overlaying the content below it. See screenshot 3 & 4 with accompanying code. Any solutions are most welcome. I am using bootstrap flatty ( http://wrapbootstrap.com/preview/WB0P6NR1N ).

JSFiddle: http://jsfiddle.net/QzTU9/8/

This is how it should look, but with the center space acting as a "resizing buffer":

Making browser size smaller:

Even Smaller, see how text and areas overlap:

Code:

<div id="topHeader" style="position: fixed;">
    <div class="row" style="height: 85px;">
        <div class="col-sm-3">
            {% if app.request.get('_route') == 'home' %}<img src="{{asset('images/logo/logo3.png')}}" style="max-height: 90px; max-width: 100%;">
            {% elseif app.request.get('_route') == 'products' %}<img src="{{asset('images/logo/logo3.png')}}" style="max-height: 90px;">
            {% elseif app.request.get('_route') == 'register' %}<img src="{{asset('images/logo/logo3.png')}}" style="max-height: 90px;">
            {% elseif app.request.get('_route') == 'who_we_are' %}<img src="{{asset('images/logo/logo1.png')}}" style="max-height: 90px;">
            {% elseif app.request.get('_route') == 'contact' %}<img src="{{asset('images/logo/logo1.png')}}" style="max-height: 90px;">
            {% elseif app.request.get('_route') == 'testimonials' %}<img src="{{asset('images/logo/logo1.png')}}" style="max-height: 90px;">
            {% elseif app.request.get('_route') == 'how' %}<img src="{{asset('images/logo/logo2.png')}}" style="max-height: 90px;">
            {% elseif app.request.get('_route') == 'faq' %}<img src="{{asset('images/logo/logo2.png')}}" style="max-height: 90px;">
            {% else %}<img src="{{asset('images/logo/logo4.png')}}" style="max-height: 90px;">{% endif %}   
        </div>
        <div class="col-sm-5"></div>
        <div class="col-sm-4">
            <form role="form" class="form form-horizontal form-login" id="loginForm" style="font-size: 10px;">
                <br>
                <div class="row">
                    <div class="col-sm-1"></div>
                    <div class="col-sm-4">  
                        <div class="form-group">
                            <input type="text" id="username" name="_username" class="form-control small-input" placeholder="USERNAME" data-validation-error-msg="Please enter username" data-validation="length" data-validation-length="min1">
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <input type="text" id="password" name="_password" class="form-control small-input" placeholder="PASSWORD" data-validation-error-msg="Please enter password" data-validation="length" data-validation-length="min1">
                        </div>
                    </div>  
                    <div class="col-sm-3" style="text-align: right; padding-right: 0px;"><button style="width: 83px;" class="btn btn-default small-input"> LOGIN </button></div>
                </div>
                <div class="row">
                    <div class="col-sm-1"></div>
                    <div class="col-sm-8 text-center"><br style="font-size: 6px;"><a style="font-size: 12px;" onclick="$('#forgotPassword').modal('show');">FORGOT LOGIN DETAILS</a>
                    </div>
                    <div class="col-sm-3" style="text-align: right; padding-right: 0px;">
                        <a class="btn btn-default btn-sm" href="{{url('register')}}"> NEW USER </a> 
                    </div>
                </div>
            </form>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-sm-12 text-center" style="font-size: 88%;">
            <span {% if app.request.get('_route') == 'home' %} style="color: black; font-weight: bold;" {%endif%}>
                {% if app.request.get('_route') != 'home' %}<a href="{{url('home')}}">HOME</a>
                {%else%} HOME {%endif%}
            </span> &nbsp; __ &nbsp;
            <span {% if app.request.get('_route') == 'who_we_are' %} style="color: black; font-weight: bold;" {%endif%}>
                {% if app.request.get('_route') != 'who_we_are' %}<a href="{{url('who_we_are')}}">WHAT IS LITTLE GIANT?</a>
                {%else%} WHAT IS LITTLE GIANT? {%endif%}
            </span> &nbsp; __ &nbsp;
            <span {% if app.request.get('_route') == 'how' %} style="color: black; font-weight: bold;" {%endif%}>
                {% if app.request.get('_route') != 'how' %}<a href="{{url('how')}}">HOW DOES IT WORK?</a>
                {%else%} HOW DOES IT WORK? {%endif%}
            </span> &nbsp; __ &nbsp;
            <span {% if app.request.get('_route') == 'products' %} style="color: black; font-weight: bold;" {%endif%}>
                {% if app.request.get('_route') != 'products' %}<a href="{{url('products')}}">PRODUCTS</a>
                {%else%} PRODUCTS {%endif%}
            </span> &nbsp; __ &nbsp;
            <span {% if app.request.get('_route') == 'testimonials' %} style="color: black; font-weight: bold;" {%endif%}>
                {% if app.request.get('_route') != 'testimonials' %}<a href="{{url('testimonials')}}">SEE WHAT OTHERS SAY ABOUT US</a>
                {%else%} SEE WHAT OTHERS SAY ABOUT US {%endif%}
            </span> &nbsp; __ &nbsp;
            <span {% if app.request.get('_route') == 'faq' %} style="color: black; font-weight: bold;" {%endif%}>
                {% if app.request.get('_route') != 'faq' %}<a href="{{url('faq')}}">FAQ</a>
                {%else%} FAQ {%endif%}
            </span> &nbsp; __ &nbsp;
            <spa {% if app.request.get('_route') == 'register' %} style="color: black; font-weight: bold;" {%endif%}> 
                {% if app.request.get('_route') != 'register' %}<a href="{{url('register')}}">REGISTER</a>
                {%else%} REGISTER {%endif%}
            </span> &nbsp; __ &nbsp;
            <span {% if app.request.get('_route') == 'contact' %} style="color: black; font-weight: bold;" {%endif%}> 
                {% if app.request.get('_route') != 'contact' %}<a href="{{url('contact')}}">CONTACT US</a>
                {%else%} CONTACT US {%endif%}
            </span>
        </div>
    </div>
</div>

Another Example - Original Size:

A Bit Smaller - Everything good so far:

Even Smaller. Original 3 Column split (col-sm-4), goes underneath each other. Suddenly header overlaps with other text:

Code:

<br><h1>WHAT WE STAND FOR</h1>
<br>
<div class="row"><div class="col-sm-9"><h1>Little Giant’s mission is to provide a complete and comprehensive 
spectrum of tailor-made branding and marketing services of the highest quality
to individuals, small businesses, small to medium enterprises and all those
that usually cannot afford such services.</h1></div></div>
<br>
<div class="row">
    <div class="col-sm-4">
        <div class="row" style="height: 60px;">
            <div class="col-sm-2 text-center"><img src="{{asset('images/icons/eye.jpg')}}" style="height:40px; max-width: 100%; max-height: 100%;"></div>
            <div class="col-sm-10"><h1><strong>01</strong><br>Our Vision</h1></div>
        </div>
        <div class="row">
            <div class="col-sm-12" style="text-align: justify;">
                Little Giant’s vision is to be the go-to provider
                of affordable branding and marketing services
                in South Africa by helping our customers personal
                and business brands to reach their true potential
                in their respective industries, thereby creating
                a comprehensive network of interconnected
                ‘little giants’.                                                    
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="row" style="height: 60px;">
            <div class="col-sm-2 text-center"><img src="{{asset('images/icons/lightbulb.jpg')}}" style="height:60px; max-width: 100%; max-height: 100%;"></div>
            <div class="col-sm-10"><h1><strong>02</strong><br>Our Ethos</h1></div>
        </div>
        <div class="row">
            <div class="col-sm-12" style="text-align: justify;">
                At Little Giant our clients are our first priority, we
                aim to ensure that they are always satisfied with the
                services we provide. We know that our customers
                are the reason for our growth and success and as
                such we strive to provide them with the quality of
                work, support and professionalism that they expect. 
                <br><br>
                We will always ensure that our staff are the best in
                their field and that they will only submit work of the
                standard we require at Little Giant. Through this we
                hope to maintain a reputation as the market leader
                in affordable branding and marketing services. 
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="row" style="height: 60px;">
            <div class="col-sm-2 text-center"><img src="{{asset('images/icons/heart.jpg')}}" style="height:48px; max-width: 100%; max-height: 100%;"></div>
            <div class="col-sm-10"><h1><strong>03</strong><br>Our Values</h1></div>
        </div>
        <div class="row">
            <div class="col-sm-12" style="text-align: justify;">
                <span class="text2" style="font-weight: bold;">Affordability</span>
                <br>
                To provide branding and marketing services at a 
                reasonable price, therby allowing those who would
                not usually have access to these services to benefit
                from them.
                <br><br>
                <span class="text2" style="font-weight: bold;">Quality</span>
                <br>
                Though we provide our products and services at
                a lower cost than the industry standard we do not
                compromise on our standards of quality, providing
                real value and quality to our customers.
                <br><br>
                <span class="text2" style="font-weight: bold;">Enduring partnerships</span>
                <br>
                At Little Giant, we are not simply interested in getting
                our customers' credit card details and payments and
                then severing ties. We envision creating enduring
                partnerships with all of our 'little giants' in which 
                we create real value through our network of support,
                collaboration and mutual interests to help all of our
                clients to reach their true potential.
                <br><br>
                <span class="text2" style="font-weight: bold;">Personalized Service</span>
                <br>
                We provide only the highest quality, tailor-made
                solutions for our clients, by looking at their unique
                businesses, their needs and problems and creating
                highly personalised solutions for them.
            </div>
        </div>
    </div>
</div>

Another issue that I am having is that I have added the top 2 rows inside a div with position: fixed to keep it at the top of the page as a header, but when scrolling the "content" does not cut off where the header begins. I have set opacity: 1, but then my entire header is just white. Lots of issues, I know....

Answer 1

Regarding your second example, remove the fixed height of 60px. 60px isn't enough for the image and the header tag when they stack.

That will fix the overlapping you see because the next block of text begins 60px below the top of the previous row (despite the fact that your h1 tag continues below the 60px height.

   <div class="row" style="height: 60px;">
        <div class="col-sm-2 text-center"><img src="{{asset('images/icons/heart.jpg')}}" style="height:48px; max-width: 100%; max-height: 100%;"></div>
        <div class="col-sm-10"><h1><strong>03</strong><br>Our Values</h1></div>
    </div>

http://jsfiddle.net/QzTU9/9/

Answer 2

尝试删除所有这些内联样式的Boss。错误将自动消失。

> Here Is the fiddle : http://jsfiddle.net/chermanarun/QzTU9/10/