Bootstrap-行中沒有包裝元素

Question

我的HTML中有一個帶有行流體類的div。 在這個div中，我有一個h1元素，2個文本輸入。 這是我的代碼。

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

但是當寬度屏幕小於768px時， nav-search div僅包裝其中的所有元素。 您可以在此小提琴中看到問題： http : //jsfiddle.net/8sfjfj5L/

我現在該怎么解決？

Answer 1

將行流體更改為容器流體。 或在第一個div中添加一個clearfix（例如： http : //www.cssmojo.com/latest_new_clearfix_so_far/ ）

Answer 2

刪除該行流體-Bootstrap中現在沒有任何此類，並在其上方添加容器/容器流體，如圖所示。

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>