0

我正在尝试使用 Bootstrap Twitter 的基本示例（登录示例）。在链接中，您可以看到示例的代码。

我在我的 IDE (NetBeans) 中复制粘贴代码替换了这一行：

<link href="../../dist/css/bootstrap.css" rel="stylesheet">

对于这个，它表明 Bootstrap 在我的电脑中的位置：

<link href="MEDIA/bootstrap/css/bootstrap.css" rel="stylesheet">

但是，如果我运行该示例，我会看到这个网络，而不是示例的漂亮原件：

在此处输入图像描述

我想我应该看到与示例中相同的结果，不是吗？为什么我会得到这个结果？

感谢您的提示！

编辑 2： @mohsin.mr 你是对的（多么愚蠢的错误）谢谢！我在另一个目录上有 signin.css，但是现在我得到了类似的结果，但与示例中的不同。按钮看起来不同，文本框的长度比按钮的长度短。

在此处输入图像描述

编辑：这是我正在运行的代码：

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Signin Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="MEDIA/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="signin.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="container">

      <form class="form-signin">
        <h2 class="form-signin-heading">Please sign in</h2>
        <input type="text" class="form-control" placeholder="Email address" autofocus>
        <input type="password" class="form-control" placeholder="Password">
        <label class="checkbox">
          <input type="checkbox" value="remember-me"> Remember me
        </label>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      </form>

    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
  </body>
</html>
4

2 回答 2

2

您的整个代码看起来是正确的。现在，您遇到此问题的唯一原因是链接signin.css，因为似乎引导 css 文件也在正确导入并且代码模式也是正确的。

于 2013-10-20T21:06:03.023 回答
0

我认为您必须使用以下自定义 CSS 来使 div 居中对齐

.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}

看到工作小提琴

于 2013-10-20T06:28:40.463 回答