html - 如何在多个菜单之间添加空间

标签 html css asp.net-mvc bootstrap-4

我试图在两个菜单之间留出空间

使用左边距和右边距,但它不起作用。

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
<style>
  /*  .space{
       margin-left:5px;
    }*/
</style>

</head>
<body>
    <div class="navbar-fixed-top">
        <div class="col-md-12">
            <a link href="" style="font-size:20px;">ABCD Technology</a>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-8"></div>
                <div class="col-md-4 space">
                    <div style="margin-right:20px;"></div>
                    @Html.ActionLink("Home", "Index", "Home")
                    @Html.ActionLink("Services", "Index", "Home")
                    @Html.ActionLink("PortFolio", "Index", "Home")
                    @Html.ActionLink("About", "Index", "Home")
                    @Html.ActionLink("Hire Developer", "Index", "Home")
                </div>
            </div>
        </div>
    </div>

    @RenderBody()

    <div class="navbar-fixed-bottom" style="margin-left:45px;">
        <footer>
            <p>&copy; @DateTime.Now.Year - <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c2f031c153e050b04182c0a0018420f0301" rel="noreferrer noopener nofollow">[email protected]</a></p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

网站.css

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

image referance

下面给出的代码也不起作用:

<div style="margin-left:5px;"></div>

我正在使用外部 css 类,例如

<style>
  /*  .space{
       margin-left:5px;
    }*/
</style>

但这也行不通。

参见上图,我正在尝试在两个菜单之间添加空格

site.css 类是否有任何更改或者我设计了错误的菜单?

最佳答案

请更换代码。

<style>
  /*  .space{
       margin-left:5px;
    }*/
    
</style>

作者

<style>
.space a{ margin:0 7px; display: inline-block; }        
</style>

关于html - 如何在多个菜单之间添加空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63828688/

相关文章:

html - 按页面长度更改侧边栏高度

php - 将可变数量的字段插入数据库MYSQLI

html - 当叠加在 img 上时,使文本显示为带有半透明黑色背景的白色

css - 为什么将 CSS 类置于其他类之上会完全改变其他不相关的类?

使用 CSS 转义的具有数字 id 的元素的 jQuery 选择器

c# - 在 ASP.NET MVC 包中使用 CDN

html - 如何从 HTML 文档中删除表格?

html - 为什么我的导航栏链接是垂直显示的而不是水平显示的?

.net - 这两个 ASP.NET MVC IgnoreRoute 指令有什么区别?

c# - 选中复选框时调用 ActionResult