我正在使用 Bootstrap 网格系统，但似乎无法使行全屏大小。现在我得到的是这样的东西:
| | col-md4 | | col-md4 | | col-md4 | |
| |
| |
| |
我也希望它像这样占据屏幕的所有空间，所以左侧和右侧没有空白。
| col-md4 | | col-md4 | | col-md4 |
| |
读过一些东西，因为它在容器内，但是当我删除它时，它是一样的。我正在使用 bootstrap.css 文件和我自己的 site.css 文件。
代码:
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<img src="images/spise.png" />
<br />
Some text here
</div>
<div class="col-lg-4">
<img src="images/tid.png" />
<br />
Some text here
</div>
<div class="col-lg-4">
<img src="images/tv.png" />
<br />
Some text here
</div>
</div>
<div class="row">
<div class="col-lg-12">
</div>
</div>
</div>
</asp:Content>
CSS:
.col-lg-4 {
height: 200px;
color: white;
text-align: center;
vertical-align: middle;
background-color: #3498db;
}
此外，我正在尝试使我的 col-md-4 div 类的文本和图标也自动位于中间。但这也无法正常工作。
已更新
这是它的外观图片:
在这里您可以看到，与我的 Bootstrap 轮播相比，它不是全尺寸的。
更新 2:(母版页代码)
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Mandersen_Hotels.Site" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title><%: Page.Title %> - My ASP.NET Application</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/Site.css" rel="stylesheet" />
<script src="scripts/jquery.js"></script>
<script src="scripts/bootstrap.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form" runat="server">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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" runat="server" href="~/default.aspx">M-Hotels
<div class="IconFront">
<asp:Image class="img1" ID="Image1" runat="server" Height="28px" ImageUrl="Icon.png" Width="30px" ImageAlign="Right" />
</div>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/default.aspx">Home</a></li>
<li><a runat="server" href="~/Booking.aspx">Booking</a></li>
<li><a runat="server" href="~/Contact.aspx">Contact</a></li>
<li><a runat="server" href="~/User.aspx">User</a></li>
</ul>
<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/Registration.aspx">Register</a></li>
<li><a runat="server" href="~/Login.aspx">Log in</a></li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<ul class="nav navbar-nav navbar-right">
<li>
<a runat="server" href="~/User.aspx" title="Manage your account">Hello,!</a>
</li>
<li>
<a runat="server" href="~/default.aspx" title="Log out"></a>
</li>
</ul>
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
</div>
<div class="container body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<hr />
<footer>
<p>© <%: DateTime.Now.Year %> - M-Hotels A/S</p>
</footer>
</div>
</form>
</body>
</html>
最佳答案
我猜.container-fluid是蓝色背景的部分。这个元素不是问题。空白是由母版页中的container body-content 引起的。尝试删除此 div 或至少删除容器类。
关于css - 如何使 Bootstrap 行 "col-md-4"全屏大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30963672/