Question

我刚刚开始使用Bootstrap。

我需要一个这样的表格：https://i.stack.imgur.com/PVPEy.png

这是我的网页代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/bundles/styles")
    <title>Webstite Evaluation Tool</title>
</head>
<body>
    <div class="input-append">
        <input class="span2" id="appendedInputButton" type="text">
        <button class="btn" type="button">Go!</button>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
</body>
</html>

软件包：

bundles.Add(new StyleBundle("~/bundles/styles").Include(
            "~/Content/bootstrap.css",
            "~/Content/bootstrap-responsive.css",
            "~/Content/bootstrap-theme.css",
            "~/Content/bars.css"
            ));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
            "~/Scripts/bootstrap.js"
            ));

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/Scripts/jquery-3.1.1.js"
            ));

我得到的结果是：https://i.stack.imgur.com/BNXXu.png

我该怎么做才能解决这个问题？似乎并非所有样式都加载了，但在源代码中我看到了捆绑包中的所有内容。

Answer 1

查看Bootstrap Docs中的按钮插件。 e.g。

  <div class="row">
    <div class="col-lg-3">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search for...">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">Go!</button>
        </span>
      </div><!-- /input-group -->
    </div><!-- /.col-lg-3 -->
  </div><!-- /.row -->

Bootply

的示例

ASP.NET +引导程序样式不起作用

1 个答案: