Twitter bootstrap asp.net内容页中带引导的内联表单设计
大家好，我是bootstrap的新手。我一直在asp.net web表单项目中使用引导模板。我已完成母版页。现在我一直在设计一个内容页面。内容页将包含一个内联表单，如下图： 由于我是新的引导，我不知道如何才能做到这一点，我应该使用什么样的CSS类。谁能给我一些样品吗 我的母版页代码如下所示：Twitter bootstrap asp.net内容页中带引导的内联表单设计,twitter-bootstrap,webforms,Twitter Bootstrap,Webforms,大家好，我是bootstrap的新手。我一直在asp.net web表单项目中使用引导模板。我已完成母版页。现在我一直在设计一个内容页面。内容页将包含一个内联表单，如下图： 由于我是新的引导，我不知道如何才能做到这一点，我应该使用什么样的CSS类。谁能给我一些样品吗 我的母版页代码如下所示： <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.Master.cs" Inherits="CJDMS.Website
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.Master.cs" Inherits="CJDMS.Website.Master" %>
<!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 %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
<form runat="server" role="form">
<asp:ScriptManager runat="server" ID="MainScriptManager" EnablePartialRendering="true">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="bootstrap" />
<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" />
</Scripts>
</asp:ScriptManager>
<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/js/jquery-1.10.2.js") %>'></script>
<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/js/jquery-2.1.1.js") %>'></script>
<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/js/jquery-ui.js") %>'></script>
<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/js/jquery-1.10.2.min.js") %>'></script>
<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/js/bootstrap.min.js") %>'></script>
<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/js/plugins/metisMenu/jquery.metisMenu.js") %>'></script>
<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/js/plugins/morris/raphael-2.1.0.min.js") %>'></script>
<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/js/plugins/morris/morris.js") %>'></script>
<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/js/sb-admin.js") %>'></script>
<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/js/demo/dashboard-demo.js") %>'></script>
<div id="wrapper">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Default.aspx">
<asp:Literal runat="server" Text="<%$Resources:JalmohalResource, AppsTitle %>" /></a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-envelope fa-fw"></i><i class="fa fa-caret-down"></i>
</a>
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i><i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="#"><i class="fa fa-user fa-fw"></i>User Profile</a>
</li>
<li><a href="#"><i class="fa fa-gear fa-fw"></i>Settings</a>
</li>
<li class="divider"></li>
<li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i>Logout</a>
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default navbar-static-side " role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<%--<asp:Button runat="server" ID="btnSearch" CssClass="btn btn-default" />--%>
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<a href="index.html"><i class="fa fa-dashboard fa-fw"></i>Company Profile</a>
</li>
<li>
<a href="#"><i class="fa fa-bar-chart-o fa-fw"></i>Vehicle <span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="flot.html">Bus Models</a>
</li>
<li>
<a href="morris.html">Bus List</a>
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<a href="tables.html"><i class="fa fa-table fa-fw"></i>Fare List</a>
</li>
<li>
<a href="forms.html"><i class="fa fa-edit fa-fw"></i>User Management</a>
</li>
<li>
<a href="#"><i class="fa fa-wrench fa-fw"></i>Sales Information <span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="panels-wells.html">Sales By Counter</a>
</li>
<li>
<a href="buttons.html">Sales By Trip</a>
</li>
<li>
<a href="notifications.html">Booked By Counter</a>
</li>
<li>
<a href="typography.html">Booked By Trip</a>
</li>
<li>
<a href="grid.html">Summary</a>
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<a href="#"><i class="fa fa-sitemap fa-fw"></i>Route Details <span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="#">Routes</a>
</li>
<li>
<a href="#">Counters</a>
</li>
<li>
<a href="#">Schedules</a>
</li>
<li>
<a href="#">Counter Schedules</a>
</li>
<li>
<a href="#">Counter Users</a>
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<a href="#"><i class="fa fa-table fa-fw"></i>Log Out</a>
</li>
</ul>
<!-- /#side-menu -->
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-8">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
-我的ASP.NET应用程序
-
-
-
-
-
-
-
-
-
-
-
-
-
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-5 col-md-offset-1"></div>
</div>
<div class="row">
<div class="col-md-11"></div>
</div>
<div class="col-md-5">
<div class="form-horizontal">
<label for="input1" class="col-sm-2 control-label">Label</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="input1" />
</div>
</div>
</div>
标签
使用引导文档。Bootstrap的文档非常丰富，您可以通过使用它们找到几乎所有问题的答案。您好，谢谢您的解决方案。正如你所说，我已经经历了。但我们发现了两个问题。如果第二行变为中心，并且第一行和第二行之间没有空间，则为1。请访问以下链接查看设计的表单和代码。并使用浏览器的F12开发工具查看该行。第二行不应居中，因为引导将从左向右移动。它很可能是在一个场集内，然后把它扔掉。最有可能的情况是，由于引导行具有引导网格CSS示例中所示的间距，所以在某个地方有其他CSS存在干扰：其他内容正在更改设置，最有可能来自字段集。