难以自定义 Bootstrap 导航栏以提高响应能力答案

【问题标题】：Difficulty customizing Bootstrap navbar for responsiveness难以自定义 Bootstrap 导航栏以提高响应能力
【发布时间】：2015-07-15 08:19:25
【问题描述】：

我希望创建一个如下所示的导航栏。我决定使用 Bootstrap，因为它很容易使用 Bootstrap 创建响应式导航栏。

我放入了我自己的自定义 CSS，使背景透明，链接为白色等，菜单链接位于中心。

你可以看看这里 - http://107.167.189.78/codeigniter/index.php/web/

调整屏幕大小时出现问题。

问题是——

1) 移动时，导航栏不可见（因为我将其设置为透明）

2) 移动时 - 导航栏按钮出现在中间（我希望按钮出现在最右边）

【问题讨论】：

标签： html css twitter-bootstrap navbar

【解决方案1】：

以下代码将使您的导航栏按钮出现在平板电脑纵向/移动显示的最右侧，并将您的背景颜色设置为粉红色，而不是使用您的导航栏背景图片..

@media all and (max-width: 768px) {
  .navbar.mynavbar{
     background: #db1d94 none repeat-x scroll 0 0;
     width: 100%;
     z-index: 9999;
  }
}

这应该可以解决我已经测试过的问题。

它看起来像这样：（在平板电脑纵向/移动设备上）

注意：一旦你再次出现背景，你必须摆脱白色边框......

【讨论】：

非常感谢。你是天使。它工作得很好。我现在删除了边框。干杯。

【解决方案2】：

对于第 1 个问题。您回答了自己的问题。你说它们变得透明是因为你是那样做的。所以撤消它。

对于第 2 点。您需要使用媒体查询或 Bootstrap 内置类。您也可以针对特定的选择器并使用text-align:right 或float: right，但要避免浮动，因为您需要清除它们。

【讨论】：

谢谢兰萨纳。我会试一试。 1）我必须使背景透明，因为我想显示背景图像。

【解决方案3】：

您的标题图片（粉红色的）有一些奇怪的问题。它存在于您的 HTML 中：

并且还作为 .myheader 的背景图片存在于您的 CSS 中

这应该让你开始：

HTML（上图）中的 img 标记导致导航出现异常。删除它。
很多问题都与.mynavbar 和position:absolute 有关。删除position:absolute，您现在需要排序的是粉色背景图像以奇怪的方式拉伸（由background-size: 100% 100%; 上的.myheader 引起）

希望对您有所帮助。

【讨论】：

谢谢安迪。我去看看。