2016-03-27 6 views
1

Ich bin neu in ASP.Net, ich habe versucht, eine einfache Anmeldeseite zu erstellen. Layout-Seite hat einen Jumbotron. Aber meine Login-Steuerelemente überlappen sich mit dem Jumbotron.RenderBody() überlappt mit _Layout.cshtml bei der Verwendung von Jumbotron

Schätzen Sie Ihre Hilfe

_Layout.cshtml - Datei

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <title>@ViewBag.Title - Title</title> 
     <link href="~/Content/Site.css" rel="stylesheet" /> 
     <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> 
     <link href="~/Content/bootstrap.css" rel="stylesheet" /> 
     <link href="~/css/Main.scss" rel="stylesheet" type="text/css"/> 
     <script src="~/Scripts/modernizr-2.6.2.js"></script> 
    </head> 
    <body> 
     <div class="navbar navbar-fixed-top"> 
      <div class="container-fluid"> 
       <div class="jumbotron"> 
        <h2>Welcome to Application</h2> 
       </div> 
      </div> 
     </div> 
     <div id ="main" class="col-lg-8"> 
      @RenderBody() 
     </div> 
    </body> 
</html> 

Login.cshtml - Login anzeigen

@{ 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
    ViewBag.Title = "Login"; 
} 


@using (Html.BeginForm("Login", "Home", FormMethod.Post)) 
{ 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(true) 

    if (@ViewBag.LoginErrorMsg != null) 
    { 
     <div class="form-group has-error"> 
      @ViewBag.LoginErrorMsg 
     </div> 
    } 

    <div class="container body-content"> 
     <div class="container-fluid"> 
      <div class="col-md-4"></div> 

      <div class="col-md-4"> 
       <div class="form-group"> 
        @Html.LabelFor(a => a.email, new { @class = "control-label" }) 
        @Html.TextBoxFor(a => a.email, new { @class = "form-control" }) 
        @Html.ValidationMessageFor(a => a.email) 
       </div> 
       <div class="form-group"> 
        @Html.LabelFor(a => a.Password, new { @class = "control-label" }) 
        @Html.TextBoxFor(a => a.Password, new { @class = "form-control" }) 
        @Html.ValidationMessageFor(a => a.Password) 
       </div> 
       <button type="submit" class="btn btn-default">Login</button> 
      </div> 

      <div class="col-md-4"></div> 
     </div> 
    </div> 
} 

Dies ist das Ergebnis, das ich screenshot bekommen

+0

Sie müssen wahrscheinlich mit CSS-Code herumspielen, denke ich – TheUknown

Antwort

-1

Lesen Sie die Bootstrap-Dokumentation unter Fixed to Top.

Körper Polsterung erforderlich

Die feste navbar Ihre anderen Inhalt überlagern, es sei denn, Sie padding oben von der hinzuzufügen. Probieren Sie Ihre eigenen Werte aus oder verwenden Sie unser Snippet unten. Tipp: Standardmäßig ist die Navigationsleiste 50px hoch.

Stellen Sie sicher, dass Sie dies nach dem Bootstrap-Kern CSS einschließen.