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

Question

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

我放入了自己的自定义 CSS 以便背景是透明的，链接是白色的等等，菜单链接位于中间。

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

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

问题是 -

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

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

Answer 1

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

对于数字 2。您需要使用媒体查询或内置 Bootstraps 类。您还可以针对特定的选择器并使用 text-align:right 或 float: right，但要厌倦浮动，因为您需要清除它们。

Answer 2

您的 header 图片（粉色图片）有一些奇怪的问题。它存在于您的 HTML:

并且还作为 .myheader

的背景图片存在于您的 CSS 中

这应该让你开始：

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

希望对您有所帮助。

Answer 3

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

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

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

它看起来像这样：（在平板电脑上 portrait/mobile）

注意：再次出现背景时，必须去掉白框...

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

Difficulty customizing Bootstrap navbar for responsiveness

html

css

navbar

twitter-bootstrap