blocks|key|150996|text|尝试将您的pull-right类放到div.collapse上。这可能会起到作用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|150997|entityMap^0|5|A|I|C|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>try putting your <code>pull-right</code> class on the <code>div.collapse</code>. That may do the trick.</p>


blocks|key|151057|text|出现这个问题是因为在bootstrap-responsive.css中，margin-right被设置为0。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|151058|Jsfiddle和一个基本的样机See+in+browser|151059|因此，您必须为它提供一些数字才能看起来合适，如下所示：|151060|.navbar+.nav.pull-right+{
+++++float:+right;
++++margin-right:+98px;+/*set+margin+this+way+in+your+custom+styesheet*/
++}|code-block|syntax|javascript|151061|创建您想要的效果的html代码可以用以下方式编写：|151062|<div+class="conatiner">
<div+class="row-fluid">
++++<div+class="span2+top_logo">
++++++++<img+width="177"+height="60"+alt="BETA+Team+Performance"+src="http://placehold.it/177x60">
++++</div>
++++<div+class="span10">
++++++++<div+class="navbar+navbar-static-top">
++++++++++++<div+class="navbar-inner">
++++++++++++++++<div+class="container">
++++++++++++++++++++
++++++++++++++++++++<button+data-target=".nav-collapse"+data-toggle="collapse"+class="btn+btn-navbar"
++++++++++++++++++++type="button"><strong>MENY+<i+class="icon-chevron-down+icon-white"></i></strong>

++++++++++++++++++++</button>
++++++++++++++++++++
++++++++++++++++++++<div+class="nav-collapse+collapse+">
++++++++++++++++++++++++
++++++++++++++++++++++++<ul+class="nav+pull-right">
++++++++++++++++++++++++++++<li+class="active"><a+href="#">Home</a>
++++++++++++++++++++++++++++</li>
++++++++++++++++++++++++++++<li><a+href="#">Link</a>
++++++++++++++++++++++++++++</li>
++++++++++++++++++++++++++++<li><a+href="#">Link</a>
++++++++++++++++++++++++++++</li>
++++++++++++++++++++++++</ul>
++++++++++++++++++++</div>
++++++++++++++++</div>
++++++++++++</div>
++++++++</div>
++++++</div>
++++</div>
++</div>|151063|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/shail/Q4phr/2/show/^0|10|C|0|G|E|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|H|3|I|5|6|7|17|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|18|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|19|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1A|8|@]|D|@]|E|$M|N]]|$1|S|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

<p>The problem arises because in bootstrap-responsive.css the <code>margin-right</code> is set to 0.</p>

<p>Jsfiddle with a basic mockup <a href="http://jsfiddle.net/shail/Q4phr/2/show/">See in browser</a></p>

<p>So you have to provide it with some number to look appropriate, like below:</p>

<pre><code>.navbar .nav.pull-right {
     float: right;
    margin-right: 98px; /*set margin this way in your custom styesheet*/
  }
</code></pre>

<p>The html code to create your desired effect can be written in the following way :</p>

<pre><code>&lt;div class="conatiner"&gt;
&lt;div class="row-fluid"&gt;
    &lt;div class="span2 top_logo"&gt;
        &lt;img width="177" height="60" alt="BETA Team Performance" src="http://placehold.it/177x60"&gt;
    &lt;/div&gt;
    &lt;div class="span10"&gt;
        &lt;div class="navbar navbar-static-top"&gt;
            &lt;div class="navbar-inner"&gt;
                &lt;div class="container"&gt;
                    &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
                    &lt;button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"
                    type="button"&gt;&lt;strong&gt;MENY &lt;i class="icon-chevron-down icon-white"&gt;&lt;/i&gt;&lt;/strong&gt;

                    &lt;/button&gt;
                    &lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
                    &lt;div class="nav-collapse collapse "&gt;
                        &lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
                        &lt;ul class="nav pull-right"&gt;
                            &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
                            &lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;
                            &lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
</code></pre>


blocks|key|369505|text|这对我来说很管用。将pull-right放入div.collapse是行不通的--它必须放在无序列表类中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|369506|<div+class="nav-collapse+collapse+navbar-responsive-collapse">

+<ul+class="nav+navbar-nav+pull-right">|code-block|syntax|javascript|369507|entityMap^0|A|A|M|C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>This here worked for me. Putting <code>pull-right</code> in the <code>div.collapse</code> doesn't work - it has to be in the un-ordered list class.</p>

<pre><code>&lt;div class="nav-collapse collapse navbar-responsive-collapse"&gt;

 &lt;ul class="nav navbar-nav pull-right"&gt;
</code></pre>


blocks|key|151175|text|在Boostrap+4中，您可以使用ml-auto将菜单向右对齐：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|151176|<div+class="navbar-nav+ml-auto">|code-block|syntax|javascript|151177|entityMap^0|I|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>In Boostrap 4 you can use <code>ml-auto</code> to align the menu to the right:</p>

<pre><code>&lt;div class="navbar-nav ml-auto"&gt;
</code></pre>


<p>I'm trying to align the navbar to the right. When I use the .pull-right class it's pushing the navbar too much to the right: "off the grid". </p>

<p>What am I doing wrong?</p>

<p>Code:</p>

<pre><code>&lt;div class="row"&gt;
&lt;div class="span3 top_logo"&gt;&lt;img src="images/logo_svart.png" width="177" height="60" alt="BETA Team Performance" /&gt;&lt;/div&gt;
    &lt;div class="span9"&gt;
        &lt;div class="navbar navbar-static-top"&gt;
            &lt;div class="navbar-inner"&gt;
                &lt;div class="container"&gt;
                    &lt;button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;&lt;strong&gt;MENY &lt;i class="icon-chevron-down icon-white"&gt;&lt;/i&gt;&lt;/strong&gt;
                    &lt;/button&gt;
                    &lt;div class="nav-collapse collapse"&gt;
                        &lt;ul class="nav pull-right"&gt;
                            &lt;li class="active"&gt;&lt;a href="#"&gt;Start&lt;/a&gt;&lt;/li&gt;
                            ...
                        &lt;/ul&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p></p>


Bootstrap navbar align want align to the right

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试将导航栏向右对齐。当我使用.pull-right类时，它会将导航栏向右推太多：“脱离网格”。我做错了什么？代码：<div class="row"><div class="span3 top_logo"><img src="images/logo_svart.png" width="177" height="6...

问引导导航栏对齐希望向右对齐
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导导航栏对齐希望向右对齐EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导导航栏对齐希望向右对齐
EN