我不能阻止引導程序堆疊水平放置的div

Question

我有一個標題，其中包含跨度7的圖像，然后是搜索欄，最后我要添加一些社交媒體圖標。 但是我遇到的問題是，當我減小瀏覽器的尺寸時，搜索欄會移動到圖片下方。 我不希望發生這種情況，我只希望圖像和搜索欄以及圖標按比例減小大小。

<div class="navbar-static-top">
    <div class="navbar-inner">
        <div class="row-fluid">
            <div class="span7">
                <a href= "#"><img src="img/image1.png" alt="image alt"></a>
            </div>
            <div class="span3">
                <form class="navbar-search pull-left">
                    <input type="text" class="search-query"  placeholder="Search..."/>
                </form>
            </div>
            <div class="span2">
                <!-- Social media icons will be added later -->
            </div>
        </div>
    </div>
</div>

Answer 1

@media (max-width: 767px) {
  .no-responsive [class*="span"] {
    float: left !important;
  }
  .no-responsive .span7 {
    width: 57.18232044198895% !important;
    *width: 57.12912895262725% !important;
  }
  .no-responsive .span3 {
    width: 22.92817679558011% !important;
    *width: 22.87498530621841% !important;
  }
  .no-responsive .span2 {
    width: 14.3646408839779% !important;
    *width: 14.311449394616199% !important;
  }
}

將<div class="row-fluid">更改為<div class="row-fluid no-responsive"> .input-block-level <div class="row-fluid no-responsive">並使用.input-block-level類進行搜索