如何使引导行“col-md-4”全屏大小答案

【问题标题】：How to make bootstrap row "col-md-4" fullscreen size如何使引导行“col-md-4”全屏大小
【发布时间】：2015-09-06 22:38:55
【问题描述】：

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

|    | 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 类的文本和图标在中间自动进行。但这也不能正常工作。

更新

这是它的外观图片：

在这里你可以看到它与我的引导轮播相比不是全尺寸的。

更新 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>

【问题讨论】：

占用空间：bootply.com/eizUrPaMKE
@Mikkel - 您使用的是哪个版本的引导程序？
也许你可以分享一个链接到你的页面？通过检查代码，更容易理解您的问题。或者这是否在您的本地环境中运行？
也许您可以发布 html 输出。您发布的部分不会导致空白。
Bootstrap v3.3.4 ，现在它在本地环境中运行..

标签： css twitter-bootstrap

【解决方案1】：

Mikkel，您好，尝试像这样使用text-centerclass。

已添加到此帖子中

我已经设置了一个 Fiddle here 来做你正在寻找的东西。

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

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

【讨论】：

没有。什么也没做呢。。拍了张照片。。现在上传。
text-center 是让你的 text 居中。
是的，但我已经用我的 css 代码做到了这一点： text-align: center;我希望图标 + 文本在垂直和水平方向上自动自动运行。
我试一试.. 2 秒 :)

【解决方案2】：

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

以后遇到此类问题，请尝试使用浏览器的开发工具（Chrome、Firefox、IE）

【讨论】：

如果我删除 .container-fluid，它会是一样的.. 有东西阻止它..
我想你没听懂我的回答。我的意思是说你必须删除容器周围的元素。您发布的代码不是空格的原因
可能是这样。但是如果没有容器周围的 HTML，就不可能知道导致空白的原因
参考您的母版页更新了我的答案
@Mikkel 只是好奇：如果我的答案能解决您的问题，您为什么要接受另一个答案？