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的引导程序

1 个答案: