Question

我是Web前端开发的新手，尽管我有后端和嵌入式编程经验。

我正在使用Bootstrap学习前端开发。我写了这个简单的引导代码（可用on jsfiddle）作为练习。

我观察的是，当我在240px宽的显示器上查看输出时，navbar的元素垂直叠加。如何停止navbar的元素垂直堆叠，而是在显示宽度减小时保持水平对齐。如果我从select中移除navbar元素，则navbar最右侧的“切换栏按钮”将保持与最左侧的“导航栏品牌”水平对齐。但是，如果在“导航栏品牌”旁边添加select元素，则“导航栏品牌”，select元素和“切换栏按钮”会垂直叠加。

此外，当显示尺寸增加到各种不同尺寸时（我使用Firefox的响应式设计视图工具进行测试），在某一点，即当显示宽度为768px或更小时，水平形式有两个文本编辑和两个按钮元素显示在“navbar品牌”的下一行。如何避免水平形式移动到下一行？我想要的是，当“切换条按钮”转换为水平形式时，它应该与“navbar品牌”和select元素水平对齐，而不是移动到下一行。简而言之，我希望navbar的元素始终保持水平对齐，而与显示宽度无关。

谢谢！

Answer 1

如何停止导航栏的元素垂直堆叠，而是在显示宽度减小时保持导航栏的水平对齐。

将元素移至<div class="navbar-header"></div>。

如果你不使用它，你可以删除切换按钮。

如果选择元素添加到＆＃34;导航栏品牌＆＃34;旁边，那么＆＃34;导航栏品牌＆＃34;，选择元素和＆＃34;切换栏按钮＆＃34;垂直叠加。

尝试添加此样式：

.form-group {
  float: left;
}

当显示宽度为768px或更小时，具有两个文本编辑和两个按钮元素的水平形式显示在＆＃34; navbar品牌＆＃34;的下一行。

尝试将两种形式合并在一起。检查下面的代码。这是你想要实现的目标吗？

https://jsfiddle.net/glebkema/rgsyfwc9/

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.form-group {
  float: left;
}
.navbar-form {
  padding: 8px 15px;
  margin: 0;
  border: 0;
}
.navbar-header {
  float: none;
}

＆＃13;

<nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand">
        Brand
      </a>
      <form class="navbar-form">
        <div class="form-group">
          <select class="form-control">
            <option>Option 1</option>
            <option>Option 2</option>
          </select>
        </div>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Test 1">
        </div>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Text 2">
        </div>
        <button type="button" class="btn btn-default">Button 1</button>
        <button type="button" class="btn btn-default">Button 2</button>
      </form>
    </div>
  </div>
</nav>

＆＃13;

当显示宽度很小时，如何避免水平元素在导航栏中移位？

1 个答案: