CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Pham Minh Tan
Pham Minh Tan

Reputation: 2096

Bootstrap - Row Not Wrapper Element In It

I have a div with row-fluid class in my HTML. In this div, I have a h1 element, 2 text inputs. Here my code.

<div class="row-fluid nav-search">
        <div class="col-lg-3 col-lg-offset-2  intro text-center">
            <h1>FIND A JOB ></h1>
        </div>        
        <div class="col-lg-7  search-box">
            <div class="col-lg-5 col-md-12 col-sm-12 text-center">
                <input type="text" name="s" class="search-box job-searchbox input-search-box" placeholder="<?php _e('Enter a keyword', ET_DOMAIN) ?> ..." value="<?php echo get_query_var( 's' ) ?>" />
            </div>
            <div class="col-lg-5 col-md-12 col-sm-12 text-center">
                <input type="text" name="job_location" class="search-box job-searchbox input-location-box" placeholder="<?php _e('Enter a location', ET_DOMAIN) ?> ..." value="<?php echo get_query_var( 'location' ) ?>" />
            </div>
        </div>
    </div>

But nav-search div only wrapper all element in it when width screen is less than 768px. You can see issue in this fiddle: http://jsfiddle.net/8sfjfj5L/

What can I do to resolve it now?

Upvotes: 0

Views: 393

Answers (2)

Deepak Yadav
Deepak Yadav

Reputation: 7089

remove that row-fluid - there isn't any such class in Bootstrap now, and add container/container-fluid above it as shown.

https://jsfiddle.net/8sfjfj5L/

<div class="container-fluid">
    <div class="row nav-search">
    <div class="col-lg-3 col-lg-offset-2  intro text-center">
         <h1>FIND A JOB ></h1>

    </div>
    <div class="col-lg-7  search-box">
        <div class="col-lg-5 col-md-12 col-sm-12 text-center">
            <input type="text" name="s" class="search-box job-searchbox input-search-box"/>
        </div>
        <div class="col-lg-5 col-md-12 col-sm-12 text-center">
            <input type="text" name="job_location" class="search-box job-searchbox input-location-box"/>
        </div>
    </div>
</div>
</div>

Upvotes: 0

igorshmigor
igorshmigor

Reputation: 802

Change row-fluid to container-fluid. Or add a clearfix to the first div (like here: http://www.cssmojo.com/latest_new_clearfix_so_far/)

Upvotes: 1

Related Questions