My bootstrap icons are not shown on my mvc website. I tried to find an issue but failed every time. Below are some configurations which might be helpful in order to find the issue. If anything else is required then please let me know.
BundleConfig.vb:
Imports System.Web
Imports System.Web.Optimization
Public Module BundleConfig
' For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
Public Sub RegisterBundles(ByVal bundles As BundleCollection)
bundles.Add(New ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"))
' Use the development version of Modernizr to develop with and learn from. Then, when you're
' ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(New ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"))
bundles.Add(New ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"))
bundles.Add(New StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"))
End Sub
End Module
This is full _Layout.vbhtml code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script language="javascript">
$(document).ready(function () {
$(".flash").prepend("<span class='glyphicon glyphicon-flash'></span> ")
$(".user").prepend("<span class='glyphicon glyphicon-user'></span> ")
$(".file").prepend("<span class='glyphicon glyphicon-file'></span> ")
});
</script>
<style type="text/css">
.jumbotron {
min-height: 300px;
position: relative;
background: url("/Images/Chorus_logo_140.png") center center;
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home", Nothing, New With {.class = "user"})</li>
<li>#Html.ActionLink("Services", "Index", "Services", Nothing, New With {.class = "flash"})</li>
<li>#Html.ActionLink("Program log", "Index", "ProgramLog", Nothing, New With {.class = "file"})</li>
<li>#Html.ActionLink("EMS Data Quality", "Index", "EmsDataQuality", Nothing, New With {.class = "file"})</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-flash"></span> Documentation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Changelog", "Index", "ChangeLog", Nothing, New With {.class = "home"})</li>
<li>#Html.ActionLink("Data Flow", "DataFlow", "ChangeLog", Nothing, New With {.class = "home"})</li>
<li>Page 1-3</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<!-- end navbar -->
#*<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home", New With {.area = ""}, Nothing)</li>
<li>#Html.ActionLink("API", "Index", "Help", New With {.area = ""}, Nothing)</li>
</ul>
</div>*#
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>#DateTime.Now.Year - SABP Development team</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required:=False)
</body>
</html>
Files Structure:
The DOM must be loaded to interact with it.
Putting your script in the <head> tag will run it before the DOM is loaded.
Adding it just before the </body> tag has the benefit of having the DOM available.
But if you insist to add it to the <head> tag, then you must amend your script e.g.:
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script language="javascript">
function AddIcon () {
$(".flash").prepend("<span class='glyphicon glyphicon-flash'></span> ")
$(".user").prepend("<span class='glyphicon glyphicon-user'></span> ")
$(".file").prepend("<span class='glyphicon glyphicon-file'></span> ")
}
document.addEventListener("DOMContentLoaded", AddIcon);
</script>
here you go
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script language="javascript">
function AddIcon() {
$(".flash").prepend("<span class='glyphicon glyphicon-flash'></span> ")
$(".user").prepend("<span class='glyphicon glyphicon-user'></span> ")
$(".file").prepend("<span class='glyphicon glyphicon-file'></span> ")
}
document.addEventListener("DOMContentLoaded", AddIcon);
</script>
<style type="text/css">
.jumbotron {
min-height: 300px;
position: relative;
background: url("/Images/Chorus_logo_140.png") center center;
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home", null, new { #class = "user" })</li>
<li>#Html.ActionLink("Services", "Index", "Services", null, new { #class = "flash" })</li>
<li>#Html.ActionLink("Program log", "Index", "ProgramLog", null, new { #class = "file" })</li>
<li>#Html.ActionLink("EMS Data Quality", "Index", "EmsDataQuality", null, new { #class = "file" })</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-flash"></span> Documentation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Changelog", "Index", "ChangeLog", null, new { #class = "home" })</li>
<li>#Html.ActionLink("Data Flow", "DataFlow", "ChangeLog", null, new { #class = "home" })</li>
<li>Page 1-3</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - - SABP Development team</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Related
I have a main category and main category has its subcategory list in database. So its a relational database. For better understanding .edmx map picture is attached. Now my goal is a partial view called _GuestNav.cshtml will contain category and subcategory list display then this _GuestNav.cshtml will be called from _Layout.cshtml. So i am calling a partial view from _Layout.cshtml and that partial view contains dynamic data with foreach loop. So i want to know how can i loop properly to display Main Category and sub Category on _GuestNav.cshtml? I have tried my best to give you better understanding however ask me any question you may have.
Controller:
[ChildActionOnly]
public PartialViewResult _GuestNav()
{
using (var db = new MyAppWebEntities())
{
return PartialView("_GuestNav", db.Categories.ToList());
}
}
_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
<script src="~/Content/sweetalert.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
#RenderSection("scripts", required: false)
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#Url.Action("Index", "Home")">My App <i class="fa fa-refresh" aria-hidden="true"></i></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
#Html.Partial("_GuestNav"); #* here i am calling partial view *#
</div>
</div>
</div>
</nav>
<div class="container body-content">
#RenderBody()
<hr />
#Html.Partial("_Footer")
</div>
</body>
</html>
_GuestNav.cshtml:
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Plans", "Plans", "Home")</li>
#* Example of loop bellow *#
#*#foreach (var allcat in allcats)
{
<li class="dropdown">
#allcat.MainCatName<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
#foreach (var subcat in allcat.subcat)
{
<li>subcat.SubcatName</li>
}
</ul>
</li>
}*#
#* Wanted output like bellow from database---> *#
<li class="dropdown">
Main Cat 1<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Subcat</li>
<li>Subcat</li>
<li>Subcat</li>
<li>Subcat</li>
</ul>
</li>
<li class="dropdown">
Main Cat 2<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Subcat</li>
<li>Subcat</li>
<li>Subcat</li>
<li>Subcat</li>
</ul>
</li>
</ul>
1.Change #Html.Partial("_GuestNav") to #{Html.RenderAction("_GuestNav", "YourControlerName");}
2.Add #Model TypeofYourViewModel on top of your partial view.
3.Change the looping as follows:
#foreach (var item in Model)
{
<li class="dropdown">
#item.MainCatName<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
#foreach (var subcat in item.subcat)
{
<li>subcat.SubcatName</li>
}
</ul>
</li>
}
Note: Change TypeofYourViewModel to whatever ViewModel you are passing into the partial view
I use asp.net MVC 5 in my project.
Here the generated code in _Layout.cshtml page:
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container topNavBtn">
<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>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li>
<li>#Html.ActionLink("API", "Index", "Help", new { area = "" }, null)</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
I remove code from this div:
<div class="navbar navbar-inverse navbar-fixed-top">
to create my own header:
<body>
<header style="background-color:green">My Header</header>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
But in view I get space in top of the page:
Any ide why I get space above?
Using a fixed navbar in Bootstrap requires setting padding-top on the body to provide sufficient space for the navbar. That space at the top is where your navbar is supposed to go, but you haven't included it. If you don't want the navbar, simply remove the padding-top from the body element. Otherwise, add the navbar to fill the space.
I tried to change several times the file but the only thing that I accomplishing every time is to add more invalid expressions
I am not able to see why now I have 6 invalid expression terms ';' in the following code?
This my _layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title - Moran</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/bootswatch/yeti/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<nav class="navbar navbar-default"></nav>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header ">
#if (User.Identity.IsAuthenticated)
{
<span id="username">#User.Identity.Name</span>
}
<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>
#Html.ActionLink("Moran", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a asp-controller="App" asp-action="Index">Home</a></li>
<li><a asp-controller="App" asp-action="ContactUs">Contact Us</a></li>
<li><a asp-controller="App" asp-action="About">About</a></li>
<li><a asp-controller="App" asp-action="Galery">Galery</a></li>
<li><a asp-controller="App" asp-action="Trips">Trips</a></li>
#if (User.Identity.IsAuthenticated)
{
<li><a asp-controller="Auth" asp-action="Logout">Logout</a></li>
}
</ul>
</div>
</div>
</div>
<div id="main" class="container-fluid">
<div>
#RenderBody()
</div>
</div>
<div id="footer" class="container-fluid">
<div class="navbar navbar-inverse navbar-fixed-bottom">
<p class="text-center text-danger">© #DateTime.Now.Year - Moran Ribadeo S.L.</p>
</div>
</div>
<script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<environment names="Development">
<script type="text/javascript" src="~/jScript/site.js"></script>
</environment>
<environment names="Production,Staging">
<script type="text/javascript" src="~/lib/_app/site.js"></script>
</environment>
#RenderSection("Scripts", false)
</body>
</html>
Could anybody advise?
#model IEnumerable<Moran.Models.Trip>
#{
ViewBag.Title = "Home Page";
}
<div class="row">
<div class="col-md-6">
<h1>Welcome</h1>
<p>This is the welcome page</p>
<a asp-controller="App" asp-action="trips" class="btn btn-lg btn-success">View trips</a>
</div>
</div>
I have a simple view:
#model BootstrapTest4.Models.Account.CambioDeClave
#{
Layout = "~/Views/Shared/SiteLayout.cshtml";
}
<h2>#Model.Title</h2>
#using (Html.BeginForm()) {
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
<div class="editor-label">
#Html.LabelFor(model => model.Pass1)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Pass1)
#Html.ValidationMessageFor(model => model.Pass1)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Pass2)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Pass2)
#Html.ValidationMessageFor(model => model.Pass2)
</div>
<p>
<input type="submit" value="Cambiar Clave" />
</p>
</fieldset>
}
#section Scripts {
#System.Web.Optimization.Scripts.Render("~/bundles/jqueryval")
}
this view was made via the Mvc4 scaffolding system (edit template) and since I use some dataannotations in my model it uses the Scripts Bundle.
the error I am getting is the following:
The following sections have been defined but have not been rendered for the layout page "~/Views/Shared/SiteLayout.cshtml": "Scripts"
searching I found that most people solve the problem adding this to their layout:
#if (IsSectionDefined("Scripts"))
{
RenderSection("Scripts",false);
}
I added that block just before the tag of my layout but i still get the same error.
as requested: my whole Layout:
#model BootstrapTest4.Models.IMenu
#using BootstrapTest4.Utils.Helpers
#using BootstrapTest4.Utils
#{
Layout = null;
}
<!DOCTYPE html>
#{
Model.usr = (UsuarioWebCliente)Session["DatosUsr"];
Model.usrDrogSelec = Html.DrogSeleccionada(Model.usr);
var Lista = Html.GeneraComboDrogs2(Model.usr, Model.usrDrogSelec.cod_drogueria);
}
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<!-- Bootstrap -->
<link href="~/Content/bootstrap/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body style="height: 100%; ">
<div class="wrapper">
<div>
<div id="whitebar">
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6" style="text-align: right">
#Model.usr.DatUsrs.desc_usuario - #Model.usr.DatUsrs.codigo_ident - #Html.ActionLink("Cerrar Sesion","Logout","Account")
</div>
</div>
</div>
</div>
<div id="bluebar">
<div class="container">
<div class="row">
<div class="col-md-4">
#Html.DropDownListFor(x => x.usr.DatUsrs.cod_drogueria, new SelectList(Lista, "Value", "Text"), new { #id = "DDLMENU", data_url = Url.Action("CambiarDrog", "Menu") })
</div>
<div class="col-md-3">
Monto Consumido:
<label id="SALDO">
#(Model.usrDrogSelec.saldo_actual == 0 ? "0.00" : Convert.ToDecimal(Model.usrDrogSelec.saldo_actual).ToString("#,##.00"))
</label>
</div>
<div class="col-md-3">
Hora Corte: XXXXX
</div>
<div class="col-md-2">
Día Corte:
<label id="DIA">
#Model.usrDrogSelec.dia_corte
</label>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="#">
<img style="max-height: 20px;" src="~/Content/Images/1381797224_home.png" />
</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
#foreach (var item in Model.MenuCollection)
{
<li class="dropdown">
#item.Name <b class="caret"></b>
#if (item.Children.Count > 0)
{
<ul class="dropdown-menu">
#foreach (var childItem in item.Children)
{
<li>#Html.ActionLink(childItem.Name, childItem.Action, childItem.Controller)</li>
}
</ul>
}
</li>
}
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<span class="glyphicon glyphicon-cog"></span><b class="caret"></b>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Droguería Principal","PrioridadDrogueria","ReportesPrioridadDrogueria")</li>
<li>Mensajería </li>
<li> #Html.ActionLink("Cambio de Clave", "CambiarClave", "Account")</li>
<li>Actualizar Datos</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div id="Content" style="height: 100%; ">
#RenderBody()
</div>
</div>
<div class="push"></div>
</div>
<div class="footer">
<div class="row">
<div class="col-md-12 footer">Test</div>
</div>
</div>
#if (IsSectionDefined("Scripts"))
{
RenderSection("Scripts",false);
}
</body>
</html>
Did you try only
RenderSection("Scripts",false);
Instead of
#if (IsSectionDefined("Scripts"))
{
RenderSection("Scripts",false);
}
You should just call RenderSection.
#RenderSection("Scripts", false)
I got the following error while running the application I resolved it by adding #RenderSection(“Scripts”,required:false) in the _Layout page.
#RenderSection("scripts", required: false)
I got an empty space between my navigation bar and the next division. I don't know where it comes from, here's my code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<!-- Navigation bar -->
<div id = "menu">
<nav class="navbar navbar-default">
<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>
<a class="navbar-brand" href="/">Menu</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class = "menu-view"><a><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<li class = "menu-edit"><a><span class="glyphicon glyphicon-arrow-left"></span> Undo</a></li>
<li class = "menu-edit"><a>Redo <span class="glyphicon glyphicon-arrow-right"></span></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class = "menu-edit"><a><span class="glyphicon glyphicon-ok"></span> Save</a></li>
<li class = "menu-edit"><a id = "a-cancel" href=""><span class="glyphicon glyphicon-remove"></span> Cancel</a></li>
</ul>
</div>
</nav>
</div>
<div style = "background-color: red">
Empty space above me !
</div>
</body>
</html>
I'm adding these extra lines because my post need some more detail before posting... what the heck is that...
First be careful you have load error :
Uncaught Error: Bootstrap's JavaScript requires jQuery(anonymous function) # bootstrap.min.js:6
Try this I add class to nav which avoid margin-bottom :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<style>
.margin-bottom-0 {
margin-bottom: 0;
}
</style>
</head>
<body>
<!-- Navigation bar -->
<div id = "menu">
<nav class="navbar navbar-default margin-bottom-0">
<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>
<a class="navbar-brand" href="/">Menu</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class = "menu-view"><a><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<li class = "menu-edit"><a><span class="glyphicon glyphicon-arrow-left"></span> Undo</a></li>
<li class = "menu-edit"><a>Redo <span class="glyphicon glyphicon-arrow-right"></span></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class = "menu-edit"><a><span class="glyphicon glyphicon-ok"></span> Save</a></li>
<li class = "menu-edit"><a id = "a-cancel" href=""><span class="glyphicon glyphicon-remove"></span> Cancel</a></li>
</ul>
</div>
</nav>
</div>
<div style = "background-color: red">
Empty space above me !
</div>
</body>
</html>