Bootstrap 4无法在导航栏中的链接之间创建保证金

问题描述：

我想在引导程序4菜单中的链接之间创建一些保证金，但我无法和不知道为什么。当我尝试基本上保证每一个我都没有页面。Bootstrap 4无法在导航栏中的链接之间创建保证金

<!DOCTYPE html> 
<html lang="sk"> 

<head> 

<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
<link rel="stylesheet" type="text/css" href="styles/normalize.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
<link rel="stylesheet" type="text/css" href="styles/style.css"> 
<title>Reštaurácia</title>  

</head> 

<body> 

<!-- Navigation --> 
<nav class="navbar navbar-expand-sm navbar-light bg-faded"> 
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation"> 
<span class="navbar-toggler-icon"></span> 
</button> 

<!-- Brand --> 
<a class="navbar-brand mleft" href="#">Reštaurácia</a> 

<!-- Links --> 
<div class="collapse navbar-collapse mright" id="nav-content"> 
<ul class="navbar-nav ml-auto"> 
<li class="nav-item "> 
<a class="nav-link " href="#">Domov</a> 
</li> 
<li class="nav-item "> 
<a class="nav-link " href="#">Rezervácia</a> 
</li> 
<li class="nav-item "> 
<a class="nav-link " href="#">Menu</a> 
</li> 
<li class="nav-item "> 
<a class="nav-link " href="#">Galéria</a> 
</li> 
<li class="nav-item "> 
<a class="nav-link " href="#">Kontakt</a> 
</li> 
</ul> 
</div> 
</nav> 






<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
</body> 


</html>

bootstrap中可能有一些默认设置，不允许我做这些更改，但我无法找到它们。

你能张贴你的CSS？ – stojevskimilan

你知道flex样式吗？ –

其实我只有一个视频的flex的基本知识。我的CSS正常化，下一个CSS只有一个类，所以我不认为是必要的。 –

答

https://codepen.io/Sunny143/pen/PEWXBe?editors=1100

.nav-item{ 
    margin-left:20px; 
    margin-right:20px; 
    }

这是什么意思？我补充保证金的链接

是的，谢谢你:) –

@JurajDuri，你以前在哪里添加了边距？ –

我在nav-item旁边做了一个新类，而不是使用nav-item。但问题是，我使用％而不是像素。百分之百仍然被窃听。 –

答

如果你正在寻找您的导航项目之间的一个简单的保证金，你可以这样做：

<style> 
.nav-item { 
    margin-left:10px; /*Could change that to anything else*/ 
} 
</style>

我同意 - 这将起作用。或者，对于Bootstrap4，您可以在导航项上使用实用程序类，例如'

...

'。 'ml'应用一个空白左边和'-4'是一个预设范围的大小。 – sifriday

答

就在你的脑袋中添加该

<style type="text/css"> 
.nav-item { 
    margin-right: 20px !important; 
}

Bootstrap 4无法在导航栏中的链接之间创建保证金

相关推荐