难以自定义Bootstrap导航栏以获得响应

Question

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

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

您可以在此处查看 - http://107.167.189.78/codeigniter/index.php/web/

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

问题是 -

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

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

Answer 1

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

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

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

它看起来像这样:(在平板电脑肖像/手机上）

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

Answer 2

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

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

Answer 3

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

并且您的CSS中也存在.myheader

的背景图片

这应该让你开始：

• HTML（上面）中的img标记导致导航行为不当。删除它。
• .mynavbar和position:absolute存在许多问题。移除position:absolute，您现在必须排序的是粉红色的背景图片以奇怪的方式拉伸（由background-size: 100% 100%;上的.myheader引起）

希望有所帮助。