html - HTML 中的 Bootstrap col-xs-12 未占用全宽

Question

我在我的页面中使用 container-fluid 和 row 类创建了一个简单的按钮链接，这样我就可以利用页面的整个可用宽度链接按钮。

但是，我的代码不会导致按钮占据页面的整个宽度。附件是上述输出的屏幕截图。

请告诉我我做错了什么。提前致谢。

[基本上我想要的是下面屏幕截图中的井应该占页面宽度的 100%(或至少 90% 并居中)。]

我的 HTML 和 CSS 代码如下:

我的 HTML 代码:

<div class="container-fluid">   
            <div class="row">
                <section id="access_list_session" class="col-sm-12">
                    <br/>
                    <p id="form-header"> Access Colleague List </p>
                        <br /><br /><br />
                        <div class="row">
                            <div class="hidden-xs hidden-sm col-md-4">
                                <i class="fa fa-5x fa-cogs" aria-hidden="true"></i>
                            </div>
                            <div class="well col-xs-12 col-sm-12 col-md-8">
                                <div id="form_link"> 
                                    <a href="xyz.php" class="btn btn-lg btn-primary btn-block" style="text-color: blue;"><i class="fa fa-list-alt" aria-hidden="true"></i> Click to access our Colleague List<br /> <span style="font-size: 10px; text-align:center;"">(Use of this list is subject to our Privacy Policy and other T&C)</span> </a>
                                </div>

                                <br/>
                                <hr>
                                <p> In case of any difficulty please contact the site administrator using the form below.</p>
                            </div>
                        </div>

                </section>
            </div>
        </div>

我的 CSS 代码

#form_link a
{
    width: 100%;
    font-size: 1em;
}

.row
{
    padding-top: 60px;
    height: 60em;
    width: 100%;
}

Answer 1

2 种解决方案恕我直言:

添加.row

.row { 
  margin: auto;
}

使您的 block 居中(参见 https://jsfiddle.net/os7frkq5/1/)

或者简单地删除 width: 100% :(参见 https://jsfiddle.net/os7frkq5/2/)