Страница ASP.NET Master-Content с верхней строкой из класса Bootstrap "row no-gutter" не работает - PullRequest
Новая
       60

Страница ASP.NET Master-Content с верхней строкой из класса Bootstrap "row no-gutter" не работает

0 голосов
/ 07 сентября 2018

Попытка создать тестовое приложение Bootstrap Master-Content (asp.net) с помощью Bootstrap. Несмотря на то, что в строке нет желоба, он все еще имеет отступы.

Изображение

enter image description here

CSS 

.customDivTopRow {
    text-decoration: solid;
    text-align: left;
    background-color: firebrick;
    height: 10%;
    width: 100%;
}

.customDivTopRowRight {
    text-align: center;
    font-size: small;
    background-color: bisque;
    height: 15%;
    width: 100%;
}


.customDivMenuRow {
    min-height: 20px;
    text-decoration: solid;
    border: thick;
    border-color: black;
    text-align: right;
    background-color: antiquewhite;
}

.customDivLeftTopRow {
    min-height: calc(100% - 450px);
    font-size: small;
    border: thick;
    border-color: black;
}

.customDivMiddleTopRow {
    min-height: calc(100% - 450px);
    text-align: center;
    margin-bottom: 5px;
    font-size: small;
    border: thick;
    border-color: black;
}

.customDivRightTopRow {
    min-height: calc(100% - 450px);
    padding-bottom: 2px;
    font-size: small;
    border: thick;
    border-color: black;
}

.customDivLeft {
    min-height: calc(100% - 650px);
    font-size: small;
    border: thick;
    border-color: black;
    background-color: cornsilk;
}

.customDivMiddle {
    min-height: calc(100% - 650px);
    text-align: center;
    font-size: small;
    border: thick;
    border-color: black;
}

.customDivRight {
    min-height: calc(100% - 650px);
    text-align: center;
    font-size: small;
    border: thick;
    border-color: black;
    background-color: cornsilk;
}


.customDivBottom {
    min-height: 30px;
    margin-top: 200px;
    text-align: center;
    font-size: small;
    border: thick;
    border-color: black;
}

.footer {
    text-align: center;
    min-height: 50px;
}

.vcenter {
    display: block;
    vertical-align: middle;
    float: right;
}


.customDivContentPage {
    padding-top: 30px;
}

.row.no-gutter {
    padding-top: 0;
    padding-left: 0;
}

    .row.no-gutter [class*='col-']:not(:first-child),
    .row.no-gutter [class*='col-']:not(:last-child) {
        padding-right: 0;
        padding-left: 0;
        padding-top: 0;
    }




.menuitem {
    text-align: center;
}

.pclass {
    padding: 2px 2px 2px 2px;
    text-align: justify;
    margin: 2px 2px 2px 2px;
}

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

Мой код MasterPage 

<body>
<form id="form1" runat="server">
<div>
<div class="container-fluid">
<div class="row no-gutter ">
<div class="col-md-9">
<div class="customDivTopRowRight">
<h2>This is header</h2>
</div>
</div>
<div class="col-md-1">
<div class="customDivTopRow">
</div>
</div>
<div class="col-md-2">
<div class="customDivTopRowRight"><
<asp:HyperLink ID="HyperLink1" runat="server" ToolTip="Click profile"/> 
<%--<asp:Label ID ="lblUsername" runat="server" Font-Bold="True"/>--%>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" id="menurow">
<div class="col-md-12">
<div class="customDivMenuRow" style="vertical-align: middle;">
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-md-2">
<div class="customDivLeft">
<div class="list-group menuitem">
<div>
<br/>
<span class="h4">Quick Links</span>
</div>
<br />
<a href="default.aspx" class="list-group-item">Home</a>
</div>
</div>
</div>
<div class="col-md-8">
<div class="customDivMiddle">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> 
</asp:ContentPlaceHolder>
</div>
</div>
<div class="col-md-2">
<div class="customDivRight">
<div class="list-group menuitem">
<div>
<br />
<span class="h4">Other Menu</span>
</div>
<br />
<a href="#" class="list-group-item list-group-item-info"><span 
class="glyphicon glyphicon-flag"></span>Office details</a>
<a href="#" class="list-group-item list-group-item-info">Our docs</a>
<a href="#" class="list-group-item list-group-item-info"><span 
class="glyphicon glyphicon-ok-circle"></span>Your voice</a>
<div>
<br />
<span class="h4">His Menu</span>
</div>
<br />
<a href="#" class="list-group-item list-group-item-info">Sports</a>
<a href="#" class="list-group-item list-group-item-info">Education</a>
<a href="#" class="list-group-item list-group-item-info">Extraa</a>
<div>
<br />
<span class="h4">Her Menu</span>
</div>
<br/>


<a href="#" class="list-group-item list-group-item-danger">Beauty tips</a>
<a href="#" class="list-group-item list-group-item-danger">Home</a>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="customDivBottom">
</div>
</div>
</div>
</div>
</div>
</form>
</body>

Проблема в 1-й строке, имеющей 3 столбца (9-1-2). Как видно на изображении, это добавление некоторого отступа, который нельзя просматривать в браузере в режиме разработчика. Я новичок в Bootstrap и даже в разработке.

...