Remove From My Forums

bootstrap Nav item align to right

Question
0

Sign in to vote

User2062956768 posted

friends

I have this code but I try many times to align items to right but not success

==================================

<nav class="navbar navbar-inverse navbar-fixed-top MyNavFontWeight " data-spy="affix" data-offset-top="197" id="Nav2018Top">
<div class="container-fluid">
<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" id="ShowButtonMenu">
<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="Start.html" style="font-size:19px;"><span class="glyphicon glyphicon-file !important" style="color:lightgoldenrodyellow;"></span> Contacts DB</a>

</div>
<div id="navbar" class="navbar-collapse collapse ">
<ul class="nav navbar-nav navbar-right">

<li style="display:inline;"><a href="frm/AboutMe.aspx" style="font-size:19px;display:inline;"> <span class="glyphicon glyphicon-link"></span> About Me </a></li>
<li style="display:inline;"><a href="frm/MyServices.aspx" style="font-size:19px;display:inline;"> <span class="glyphicon glyphicon-link"></span> My Services </a></li>
<li style="display:inline;"><a href="frm/MyMission.aspx" style="font-size:19px;display:inline;"> <span class="glyphicon glyphicon-link"></span> My Mission </a></li>
<li style="display:inline;"><a href="frm/Login.aspx" data-toggle="collapse" data-target=".navbar-collapse.in"><span class="glyphicon glyphicon-log-in" style="color:burlywood"></span><b style="color:red;font-size:19px;display:inline;"> LOG IN </b></a></li>

</ul>
</div>

</div>
</nav>

==========================================

edit

the items are moving to the right but not display inline (same line)

Thursday, May 30, 2019 3:37 PM

Answers

User839733648 posted

Hi mrzoz,

According to your description and code, I suggest that you coul remove all the display:inline; style from your code.

Because bootstrap itself has already defined those fit styles.

Here is the modfied code you could refer to.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <nav class="navbar navbar-inverse navbar-fixed-top MyNavFontWeight " data-spy="affix" data-offset-top="197" id="Nav2018Top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <!--responsive menu button-->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" id="ShowButtonMenu">
                        <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="Start.html" style="font-size: 19px;"><span class="glyphicon glyphicon-file !important" style="color: lightgoldenrodyellow;"></span>Contacts DB</a>

                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav  navbar-right">
                        <li><a href="frm/AboutMe.aspx" style="font-size: 19px;"><span class="glyphicon glyphicon-link"></span>About Me </a></li>
                        <li><a href="frm/MyServices.aspx" style="font-size: 19px;"><span class="glyphicon glyphicon-link"></span>My Services </a></li>
                        <li><a href="frm/MyMission.aspx" style="font-size: 19px;"><span class="glyphicon glyphicon-link"></span>My Mission </a></li>
                        <li><a href="frm/Login.aspx" data-toggle="collapse" data-target=".navbar-collapse.in" style="font-size: 19px;"><span class="glyphicon glyphicon-log-in" style="color: burlywood"></span><b style="color: red; "> LOG IN </b></a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </form>
</body>
</html>

result:

Best Regards,

Jenifer

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Friday, May 31, 2019 2:41 AM

All replies