Question

您好我最近在Bootply.com上创建了几个页面并尝试将它们转移到我在Visual Studios中创建的网站，但是，样式最终会出现格式错误，并且看起来不像它在Bootply.com上的样子。这是一些照片：

On Bootply：

在Visual Studios上：

我使用Bootstrap 2.3.2在Bootply上开发了它，我从这个站点下载了Boostrap：http://getbootstrap.com/2.3.2/，这是2.3.2版本，所以我不明白为什么如果我只是有任何区别将我在Bootply上创建的内容复制并粘贴到Visual Studio上的标签中。这种差异不是由于使用的图像的差异造成的，因为在Bootply上我使用的任何图像，它都会缩放以填充旋转木马，菜单出现在图像内部而不是顶部。

这是我的页面的html，也许我添加了一些抛出bootstrap的东西：

<%@ 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">
	<link href="Styles/css/home.css" rel="stylesheet" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<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>

Answer 1

除了作为引导程序一部分的.css文件外，Bootply还会生成一个单独的.css文件。将这个额外的.css文件合并到我的项目中可以让它工作。

样式在网站上显示不同于Bootply

1 个答案: