Question

我正在使用引导网格系统，但似乎无法使行全屏大小。现在我得到这样的东西：

|    | 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类，它在中间也是自动的。但这也行不通。

已更新

以下是它的样子：

enter image description here

在这里你可以看到它与我的引导旋转木马相比并不是全尺寸。

更新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&nbsp;
                <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>&copy; <%: DateTime.Now.Year %> - M-Hotels A/S</p>
        </footer>
    </div>
</form>
</body>
</html>

Answer 1

我猜.container-fluid是蓝色背景的部分。这个元素不是问题。空白是由您母版页中的container body-content引起的。尝试删除此div或至少删除容器类。

对于此类问题，请尝试使用浏览器的devtools（Chrome，Firefox，IE）

Answer 2

Mikkel ，您好，请尝试使用text-center这样的课程。

已添加到此帖

我已经设置了 Fiddle here 来做你想要的事情。

我将图像和文字包装在一个div中并以两种方式对中。

.center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;  
}

如何制作bootstrap行“col-md-4”全屏大小

2 个答案: