【问题标题】:Bootstrap - reversing my navbar to Right-to-LeftBootstrap - 将我的导航栏反转为从右到左
【发布时间】:2017-06-07 15:43:29
【问题描述】:

我正在尝试制作一个导航栏,但我需要它从右到左,因为它是希伯来语。

我尝试制作一个响应式导航栏,其中所有链接的按钮都在左侧和右侧。 和右侧的品牌。 它们在小型设备上崩溃。

好吧,我无法让它反转,而且我有时还会遇到一个问题,即在小型设备上,品牌和折叠按钮在导航栏中间发生碰撞。

【问题讨论】:

  • 请展示你的努力。你试过什么?
  • 给我1分钟搞定
  • 对不起,我不能按 Ctrl-Z 去那里。我尝试了很多东西,主要是把所有导航项目放在一个 flexbox 中,但我无法定位它们并且品牌移动到左侧.

标签: html navbar bootstrap-4


【解决方案1】:

好吧,我通过添加来修复它:

body{
    direction: rtl;
}

到我的 css...

感谢您的帮助,很抱歉我的错误标题 D 误导了您:

【讨论】:

    【解决方案2】:
    Maybe you can use media query with the smallest query eg media query
    example:
    
    
    <nav class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>    
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a href="#">Left</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-center">
            <li><a href="#">Center</a></li>
            <li><a href="#">Center</a></li>
          <li><a href="#">Center</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Right</a></li>
        </ul>
      </div>
    </nav>
    
    @media (min-width: 240px) {
      .navbar-nav.navbar-center {
        position: absolute;
        left: 50%;
        transform: translatex(-50%);
      }
    

    【讨论】:

    • 我尝试粘贴你的代码而不是我的代码,当我测试它时,我在左侧有一个小按钮,当我点击它时,我在它下面有左右链接和两个中心链接中间稍低于左右。我做错什么了吗?我将媒体查询粘贴到我的 CSS 中,它在 Bootstrap css 之后启动。
    • 我在帖子中犯了一个错误,我的意思是从右到左。
    • 这个问题是什么意思......我尝试制作一个响应式导航栏,其中所有链接的按钮都在左侧和右侧。和右侧的品牌。它们在小型设备上崩溃。 ??? mybe解决方案小设备使用媒体查询css
    【解决方案3】:

    这对我来说很好。

    <ul class="nav nav-tabs nav-justified" style="direction: rtl;">         
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-05-31
      • 1970-01-01
      • 2016-10-22
      • 2015-01-30
      • 2018-12-26
      • 1970-01-01
      • 2015-07-19
      相关资源
      最近更新 更多