HTML中的引导col-xs-12未采用全宽度

我在页面中创建了一个简单的按钮链接，其中包含

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>

---

我不知道这是否是你的意思，但你可以试试这个：

<div class="container-fluid">

        <section id="access_list_session" class="col-md-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-12">
                    <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>

        </section>

    </div>

访问同事列表







如有任何困难，请使用以下表格与网站管理员联系

您想要的是使用块显示的

元素

a { display: block }

阅读内联元素和块元素之间的差异，因为这对它们的布局方式至关重要。
2解决方案IMHO：

外接程序行

.row { 
  margin: auto;
}

将块居中的步骤（请参见）

或者只需删除宽度：100%：

---

（请参阅）

col-xs-12

应该占据整个页面的宽度。没有。根据你的建议，我尝试了

col-xs-8

，但它进一步缩小了按钮的宽度，而不是增加。对不起，我的打字错误是

col-xs-12

，因为隐藏COG时需要覆盖整个页面。它不起作用。我得到了同样的结果，在

井的右侧有很大的空间（正如我在原始屏幕截图上看到的那样）@ABor这很奇怪，上面的代码对我有效，当我调整浏览器的大小时也是如此。也许我错了，但是您是否有任何附加的
css
文件以及
boostrap
，这些文件可能会影响
标记？我的css文件中有一个
.row
类描述。我在上面的原始CSS代码中添加了与编辑相同的内容。
.row { 
  margin: auto;
}