html - Bootstrap 导航栏对齐正确的问题没有崩溃

标签 html css twitter-bootstrap navbar

我在 Bootstrap 导航栏内的导航对齐时遇到问题。

在 plunkr 中创建了一个最小代码。 Plunkr here

我遇到的困难:

  • 我想将“问题”导航移到最右边。
  • 当我尝试在手机或平板电脑版本中查看时,同样的问题导航会创建 2 行。

我怎样才能解决这两个问题

最佳答案

  1. 在“.navbar-header”的顶部添加一个pull-left类(class)。默认情况下,此 header 不会针对移动设备 float 。添加 pull-left 会给右边的标题空间来显示你的问题导航。
  2. 一旦“.navbar-header”关闭,添加一个新的 div,<div class=“pull-right”></div> .您的“.navbar-collapse”和“problem nav”现在将驻留在此处。
  3. 将“.navbar-collapse”和“problem nav”放入其中。
  4. 将“.navbar-collapse”更新为 “pull-left”你应该得到你想要的布局。

关于html - Bootstrap 导航栏对齐正确的问题没有崩溃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43712599/

相关文章:

css - 2 个 div,并排占用 100% 的空间

javascript - jQuery Datepicker 在选定日期后关闭日期选择器

javascript - Mailto 链接仅在 web 邮件客户端时在新选项卡中打开

javascript - 使用 jQuery TinyMCE 加载外部 TinyMCE 插件

html - 在设计电子邮件的 HTML 模板时,我应该知道什么

c# - Bootstrap Carousel with Repeater 一张一张地显示所有幻灯片我想一张一张地显示它 3 项

html - Bootstrap maxcdn 影响我的 CSS。请帮我解决

html - 网页抓取:网页抓取的对象与网站上的信息不匹配并导致 RStudio 崩溃

javascript - 如何使用 Chrome.downloads api 获取下载列表?

html - 如何将水平CSS应用于div