2016-12-07 4 views
-1

Ziemlich geradlinig, möchte ich die ASP.NET-Seite, um die volle Breite des Bildschirms aufzunehmen. 100% ist NICHT 100%, ich habe viele Vorschläge ausprobiert und alle sind gescheitert. Ich bin mir sicher, dass dies eine einfache Codezeile ist, aber ich scheine es einfach nicht zu treffen.Wie bekomme ich die Seitenbreite Einschränkungen

Wenn Sie Code-Schnipsel benötigen, lassen Sie es mich wissen, aber ich denke nicht, dass es hilft.

Danke.

enter image description here

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="mytestsite.com.Site1" %> 
<!DOCTYPE html> 
<html lang="en"> 
<head runat="server"> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<title><%: Page.Title %></title> 

<webopt:bundlereference runat="server" path="~/Content/css"/> 
<link href="~/Content/bootstrap.css"  type="text/css" rel="stylesheet"/> 
<script src="~/Scripts/jquery-2.2.4.min.js" type="text/js"></script> 
<script src="~/Scripts/bootstrap.js"  type="text/js"></script> 
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 

<asp:PlaceHolder runat="server"> 
    <%: Scripts.Render("~/bundles/modernizr") %> 
</asp:PlaceHolder> 
</head> 
<body style="resize:both; margin:0%; height:100%; width:100%;"> 
<form runat="server"> 
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" ScriptMode="Release" LoadScriptsBeforeUI="true"> 
<Scripts> 
<%--Framework Scripts--%> 
      <asp:ScriptReference Name="MsAjaxBundle" /> 
      <asp:ScriptReference Name="jquery" /> 
      <asp:ScriptReference Name="bootstrap" Path="~/Scripts/bootstrap.js" /> 
      <asp:ScriptReference Name="respond" /> 
      <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" /> 
      <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" /> 
      <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" /> 
      <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" /> 
      <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" /> 
      <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" /> 
      <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" /> 
      <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" /> 
      <asp:ScriptReference Name="WebFormsBundle" /> 
      <%--Site Scripts--%> 
     </Scripts> 
    </asp:ScriptManager> 

    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <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" runat="server" href="~/"></a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a runat="server" href="~/">Return to My Test Site Home</a></li> 
        <li><a runat="server" href="~/">Bin Shredding - Overview</a></li> 
        <li><a runat="server" href="~/">Facility Questionnaire</a></li> 
        <li><a runat="server" href="~/">Bin Shredding FAQ</a></li> 
       </ul> 
       <p class="nav navbar-text navbar-right"></p> 
      </div> 
     </div> 
    </div> 
    <div class="container body-content"> 
     <asp:ContentPlaceHolder ID="MainContent" runat="server"> 
     </asp:ContentPlaceHolder> 
     <hr /> 
     <footer> 
      <p>&copy; <%: DateTime.Now.Year %> - My Test Site</p> 
     </footer> 
    </div> 

</form> 

DOM-Capture, wie pro Antrag.

enter image description here

+1

Das hat nichts mit ASP.NET zu tun. Dies ist eine HTML/CSS-Frage. Bitte posten Sie Ihr ** gerenderten ** Markup. – Dai

+0

Sie haben geschrieben, dass Sie "viele Vorschläge probiert" haben, ohne zu sagen, was sie tatsächlich waren. – Dai

+0

Vorschläge sind: 1) Einstellung Körper Stil zu "Marge: 0%; Höhe: 100%; Breite: 100%;" innerhalb von site.master 2) Festlegen, dass die Elemente in einem anderen DIV aus dem übergeordneten Container ausbrechen. 3) Einige Javascript in der bootstrap.css –

Antwort

2

Es sieht aus wie Sie Bootstrap verwenden. Im HTML-Markup haben Sie ein div mit einem Klassencontainer. Wenn Sie in die Bootstrap-CSS schauen, werden Sie sehen, dass ein Stil an den hängt, der eine maximale Breite angibt, vielleicht etwas wie 1170px oder so. Es gab verschiedene Werte und/oder es ist möglich, das beim Herunterladen des Bootstrap-Pakets anzupassen.

Die einfachste Möglichkeit, dies zu ändern, besteht darin, die Containerklasse in container-fluid zu ändern. Es ist auch möglich, die CSS-Dateien zu bearbeiten und zu ändern, aber es ist komplex, weil es viele verschiedene Medienabfragen gibt, bei denen die maximale Breite für .container definiert ist.

+0

Ich schätze es nicht, wer auch immer meine Frage abgelehnt hat, da ich nach stundenlanger Recherche zu dieser Frage nichts finden konnte. Aber, trotz der Rückwirkung von der Gemeinde, haben Sie meine Frage beantwortet. 1 Million Internets für Sie, guter Herr! –

+1

Gern geschehen. Es gibt viele Funktionen und Dinge im Bootstrap. Sehen Sie sich die Grundlagen hier http://getbootstrap.com/css/ und alle anderen Bits an, die Sie in den Komponenten http://getbootstrap.com/components/ verwenden können. Diese beiden Abschnitte waren für mich am nützlichsten, als ich anfing. – Rothrock

+0

Vielen Dank, ich habe nur an dieser Stelle mit Modifikationen von boatswatch gespielt. –

Verwandte Themen