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;
}

将您的区块居中（请参阅https://jsfiddle.net/os7frkq5/1/）

或只是删除width: 100% : （见https://jsfiddle.net/os7frkq5/2/）

Answer 2

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

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

Answer 3

你想要的是使用块显示的a元素。

a { display: block }

了解内联元素和块元素之间的差异，因为它对于它们的布局方式至关重要。

HTML中的Bootstrap col-xs-12没有占据全宽

3 个答案: