Styling zeigt sich anders auf der Website als auf Bootply

Hallo Ich habe vor kurzem ein paar Seiten auf Bootply.com erstellt und versucht, sie auf die Website zu übertragen, die ich in Visual Studios erstellen, aber das Styling endet falsch und sieht nicht wie aus so wie es auf Bootply.com aussieht. Hier sind ein paar Bilder:Styling zeigt sich anders auf der Website als auf Bootply

Auf Bootply:

Auf Visuelle Studios:

Ich entwickelte es auf Bootply Bootstrap 2.3.2 verwenden und ich heruntergeladen Bootstrap aus Diese Seite: http://getbootstrap.com/2.3.2/, das ist die Version 2.3.2, also sehe ich nicht, warum es einen Unterschied geben sollte, wenn ich einfach kopieren und einfügen, was ich auf Bootply in Tag erstellt habe Visual Studios. Diese Abschwächung wird nicht durch einen Unterschied in dem verwendeten Bild verursacht, da bei Bootply jedes Bild, das ich verwende, skaliert wird, um das Karussell zu füllen, und das Menü erscheint innerhalb des Bildes im Gegensatz zu darüber.

Hier ist der HTML-Code für meine Seite, vielleicht habe ich etwas, das weg zu werfen Bootstrap ist:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HomeTest.aspx.cs" Inherits="HomeTest" %> 
 

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head runat="server"> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <title>Home</title> 
 

 
    <!-- Bootstrap --> 
 
    <link href="Styles/css/bootstrap.min.css" rel="stylesheet"> 
 
\t <link href="Styles/css/home.css" rel="stylesheet" /> 
 
\t <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
\t <script src="Styles/js/bootstrap.min.js"></script> 
 

 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
</head> 
 
<body> 
 
    <!-- NAVBAR 
 
    =================== --> 
 
    <div class="navbar-wrapper"> 
 
     <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. --> 
 
     <div class="container"> 
 

 
     <div class="navbar navbar-inverse"> 
 
      <div class="navbar-inner"> 
 
      <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. --> 
 
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="brand" href="#">Brand</a> 
 
      <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. --> 
 
      <div class="nav-collapse collapse"> 
 
       <ul class="nav"> 
 
       <li class="active"><a href="#">Home</a></li> 
 
       <li><a href="#about">Log In</a></li> 
 
       <li><a href="#contact">About</a></li> 
 
       <!-- Read about Bootstrap dropdowns at http://twitter.github.com/bootstrap/javascript.html#dropdowns --> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
 
        <ul class="dropdown-menu"> 
 
        <li><a href="#">Action</a></li> 
 
        <li><a href="#">Another action</a></li> 
 
        <li><a href="#">Something else here</a></li> 
 
        <li class="divider"></li> 
 
        <li class="nav-header">Nav header</li> 
 
        <li><a href="#">Separated link</a></li> 
 
        <li><a href="#">One more separated link</a></li> 
 
        </ul> 
 
       </li> 
 
       </ul> 
 
      </div><!--/.nav-collapse --> 
 
      </div><!-- /.navbar-inner --> 
 
     </div><!-- /.navbar --> 
 

 
     </div> <!-- /.container --> 
 
    </div><!-- /.navbar-wrapper --> 
 

 

 

 
    <!-- Carousel 
 
    ================================================== --> 
 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
     <div class="carousel-indicators"> 
 
     <ol> 
 
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
 
      <li data-target="#myCarousel" data-slide-to="2"></li> 
 
     </ol> 
 
     </div> 
 
     <div class="carousel-inner"> 
 
     <div class="item active"> 
 
      <img src="http://lorempixel.com/1280/1024/technics"> 
 
      <div class="container center center-vertical"> 
 
      <div class="carousel-caption center center-text"> 
 
       <h1 style="font-size:60px">Welcome!</h1> 
 
       <p class="lead" style="font-size:32px">Once upon a time there was....</p> 
 
       <a class="btn btn-large btn-primary center-block" href="#">Sign up today</a> 
 
       <a class="btn btn-large" style="background-color:transparent">Donate!</a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="http://lorempixel.com/1280/1024/technics" alt=""> 
 
      <div class="container"> 
 
      <div class="carousel-caption"> 
 
       <h1>Another example headline.</h1> 
 
       <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
 
       <a class="btn btn-large btn-primary" href="#">Learn more</a> 
 
       <a class="btn btn-large" style="background-color:transparent">Donate!</a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="http://lorempixel.com/1280/1024/abstract" alt=""> 
 
      <div class="container"> 
 
      <div class="carousel-caption"> 
 
       <h1>One more for good measure.</h1> 
 
       <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
 
       <a class="btn btn-large btn-primary" href="#">Browse gallery</a> 
 
       <a class="btn btn-large" style="background-color:transparent">Donate!</a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> 
 
     <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> 
 
    </div><!-- /.carousel --> 
 
    </body>

Quelle

2017-08-27 Xigaphactus

Wird die Website nach der Bereitstellung oder nur in Visual Studio fehlerhaft angezeigt? –

Ich habe es auf einem lokalen Host ausgeführt. Das obige Bild zeigt, wie die Seite in meinem Browser mit dem localhost aussieht. – Xigaphactus

@LawrenceCherone Ja, ich benutze die bootstrap.min.css – Xigaphactus

Bootply eine separate CSS-Datei erzeugt, um die CSS-Dateien zusätzlich, die Teil des Bootstrap. Durch die Einbindung dieser zusätzlichen .css-Datei in mein Projekt konnte es funktionieren.

Quelle

2017-08-28 00:17:04 Xigaphactus

Styling zeigt sich anders auf der Website als auf Bootply

Antwort

Verwandte Themen