html - Bootstrap 向右浮动元素

Question

这是我的导航栏的 bootstrap.css 文件

@media (min-width: 768px) {
  .navbar-nav {
    float: left;
    margin: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

在我的导航栏中我有 4 个元素 -

1) Search
2) Help
3) Logout
4) Feedback

我需要将“搜索”元素 float 到左侧，将所有其他元素 float 到右侧。

如何进行更改？

Answer 1

因为你使用的是 LESS 添加 .pull-right();/.向左拉(); mixin 应该可以满足您的需求。

需要考虑的事项: 1. 下面的示例以 :first-child 为第一个 li 元素 2. 你的 DOM 可能包含类名，例如.search, .help, etc.. 所以这也是一个选项。您只需将 :first-child 替换为您要定位的类。 3. 检查 .navbar-nav 类的宽度。如果它没有覆盖列表元素的宽度，它就不会成功。

@media (min-width: 768px) {
  .navbar-nav {
    float: left;
    margin: 0;
  }
  .navbar-nav > li {
    .pull-right();
    &:first-child {
      .pull-left();
    }
  }
  .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}