当前位置: 首页 > 面试题库 >

Bootstrap 3-如何在导航栏中最大化输入宽度

芮歌者
2023-03-14
问题内容

我想在不创建换行符的情况下最大化“搜索”文本输入的宽度(即,“清除”链接将与“关于”链接紧密结合)。

我只有CSS和网页设计的基本经验。我阅读了有关“ overflow: hidden”技巧的内容,但是当目标元素右边有更多元素时,我不明白如何使用它。

谢谢

编辑:

可以部分解决方案是针对每种情况“手动”设置宽度,例如在:

@media (max-width: 767px) {
  #searchbar > .navbar-form {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #searchbar > .navbar-form {
    width: 205px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  #searchbar > .navbar-form {
    width: 425px;
  }
}

@media (min-width: 1200px) {
  #searchbar > .navbar-form {
    width: 625px;
  }
}

但是当菜单的文本为“动态”(例如,包含“ Hello用户名”)时,此解决方案将不起作用。

我想如果您假设菜单文本的宽度有限制,这不是一个大问题-手动计算/测试这些宽度只是很烦。我只是想知道是否有一种自动完成此操作的巧妙方法。


问题答案:

对于Bootstrap 3.2及更高版本,您还应该将设置display:table;input-group,将宽度设置1%input- group-addon

<div style="display:table;" class="input-group">
            <span style="width: 1%;" class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
            <input type="text" autofocus="autofocus" autocomplete="off" placeholder="Search Here" name="search" style="" class="form-control">
          </div>

演示Bootstrap版本3.2+:

-

是否允许更改导航栏元素的位置?我不理解“不创建换行符(即,“清除”链接将与“关于”链接紧密相连)。。

我做了什么:

  • 将浮点数拖放到窗体的左侧(通过删除navbar-left类)
  • 给其他导航栏元素右浮(navbar-right类)
  • 将表单组的显示设置为内联(style="display:inline"
  • 更改元素的位置(右侧先浮动)

相关问题:

html

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">My Project</a>
    </div>
    <div class="navbar-collapse collapse" id="searchbar">

      <ul class="nav navbar-nav navbar-right">
        <li><a href="about.html">About</a></li>
        <li id="userPage">
          <a href="#@userpage"><i class="icon-user"></i> My Page</a>
        </li>
        <li><a href="#logout" data-prevent="">Logout</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#" title="Start a new search">Clear</a></li>
      </ul>



     <form class="navbar-form">
        <div class="form-group" style="display:inline;">
          <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
            <input class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
          </div>
        </div>
      </form>

    </div><!--/.nav-collapse -->
  </div>
</div>


 类似资料:
  • 问题内容: 我想在页面上建立一个导航栏效果,像一样(向下滚动栏变得更小并且徽标更改后)。我在页面上使用bootstrap 3。有没有一种简单的方法可以通过Bootstrap实现它? 问题答案: 粘性导航栏: 要制作粘性导航,您需要将 navbar-fixed-top 类添加到导航中 官方文档 :http : //getbootstrap.com/components/#navbar-fixed-

  • 我用的是木星笔记本。我有一个相当宽的屏幕,但是显示的输出(例如,当我打印一个数组时)被格式化,就像屏幕很窄一样。 我找到了一种增加细胞宽度的方法 但这似乎只影响输入,而不影响输出(参见屏幕截图): 我已尝试在

  • 我正试图获得一个可切换的边栏: 无边栏: 带侧边栏: (以下是一个行为示例:http://pythonhosted.org/cloud_sptheme--请参见侧栏上的按钮。使用其代码库并不容易,因为它不是基于引导的) 我从一个使用Bootstrap 2和jQuery 1.8的工作示例开始:jsfiddle,SO question,并试图使其在Bootstrap 3上工作。下面是一个代码(boot

  • 我这里有一个基本的Bootstrap navbar 我想做的是: (Navbar) -----logo---------------------登录/注册----- (下拉菜单) ----子项----子项---------------------------------- 在悬停时,我想使下拉菜单显示全宽右下方的navbar。悬停事件不是我有问题的,我有问题定位它正确的100%宽度。 更新 我看到

  • 导航栏是一个将商标、导航以及别的元素简单放置到一个简洁导航页头的的包裹。它很容易扩展,而且,在折叠板插件的帮助下,它可以轻松与幕后内容整合。 基础 这些是你开始使用导航条之前需要知道的东西: 导航条要求一个包裹的.navbar以及一个配色方案类(可以是.navbar-default或者.navbar-inverse)。 当在一个导航条中使用多个组件时,必须用一些 对齐类 。 导航条以及它们的内容默

  • 导航栏是一个固定区域 (在固定和穿透布局类型中) 。它位于屏幕顶部,包含页面标题和导航元素。 导航栏包含3个部分:左、中、右。每个部分都可以包含任意的HTML内容,但推荐按照如下方式使用: 左部 用来放置返回链接、图标以及单独的文字链接。 中部 用来显示页面标题和标签链接(即按钮控制)。 右部 和左部一样。 导航栏布局 导航栏布局相当简单,根据字面意思即可理解: <div class="navba