Question

如何将导航栏标题（包含徽标）浮动到Bootstrap中的右侧部分。这是我的例子：

    <nav class="navbar navbar-default navbar-fixed-top BKoodakBold" id="topMenu">
    <div class="container">
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="aboutus.php">About Gooyanet&nbsp;<span class="glyphicon glyphicon-equalizer"></span></a></li>
                <li><a href="signin.php">Login to your account &nbsp;<span class="glyphicon glyphicon-user"></span></a></li>
                <li><a href="prove.php">Register at Gooyanet &nbsp;<span class="glyphicon glyphicon-registration-mark"></span></a></li>
            </ul>
        </div>
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://www.gooyanet.com">Gooyanet</a>
        </div>
    </div>
</nav>

Answer 1

将以下课程与您的div一起使用

<div class="pull-left collapse navbar-collapse"> </div>
<div class="pull-right navbar-header"></div>

Answer 2

将pull-right helper class添加到要向右浮动的元素。在这种情况下，这是您的function onClick_btnSendMessage() { var childIFrame = window.document.getElementById("editorFrame"); if (!empowerInstance) { empowerInstance = EditorAPI.getInstance(childIFrame.contentWindow, window.location.origin); } var doc = empowerInstance.document; return hasChanged(doc).then(function() { return save(doc) }) } function hasChanged(doc) { return new Promise(function(resolve, reject) { doc.hasChanged(function(returnValue) { if (returnValue.success === true && returnValue.isDirty === true) { resolve(returnValue) } else { reject(returnValue) } }) }) } function save(doc) { return new Promise(function(resolve, reject) { doc.save(function(returnValue) { if (returnValue.success === false) { console.log(returnValue.message); reject(returnValue) } else { resolve(returnValue) } }) }) } // ------ $('a[data-toggle="tab"]').on("shown.bs.tab", function(e) { onClick_btnSendMessage().then(function() { var target = $(e.target).attr("data-EditorUrl"); // activated tab var childIFrame = $("#editorFrame"); childIFrame.attr("src", target); }).catch(function(error) { // handle the error console.error('Error!', error) }) });。请参阅以下演示。

＆＃13;

.navbar-header

＆＃13;

Answer 3

检查以下代码。我使用过class =＆＃34; navbar-header navbar-right＆＃34;在标题上。

<nav class="navbar navbar-default navbar-fixed-top BKoodakBold" id="topMenu">
  <div class="container-fluid">
    <div class="navbar-header navbar-right">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://www.gooyanet.com">Gooyanet</a>
        </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="aboutus.php">About Gooyanet&nbsp;<span class="glyphicon glyphicon-equalizer"></span></a></li>
                <li><a href="signin.php">Login to your account &nbsp;<span class="glyphicon glyphicon-user"></span></a></li>
                <li><a href="prove.php">Register at Gooyanet &nbsp;<span class="glyphicon glyphicon-registration-mark"></span></a></li>
            </ul>
    </div>
  </div>
</nav>

输出如下所示。希望它是您正在寻找的东西：）

Screen Shot of the Output

如何将导航栏标题浮动到右侧

3 个答案: