Question

我对bootstrap和css很新。首先，我想知道我写的代码是否正确。使用更多容器很好吗？我使用流体容器作为页眉和页脚（宽度100％vw），以及内容的标准容器。

其次，我不确定编写我的页脚的最佳方法是什么。我需要它在页面的底部，但没有固定绝对位置（我不希望它在浏览器窗口中修复）。我没有成功尝试了不同的解决方案。要把我所有的容器都放在另一个容器里吗？

非常感谢你，如果我没有完美解释或者我错过了什么，那就很抱歉。

<div class="container">
    <div class="row">
        <div clas="col-xs-12">
            <nav class="navbar navbar-default navbar-fixed-top">
                <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>
                    <div class="navbar-brand no_margins">
                        <img src="images/logo.png" alt="logo">
                    </div>
                </div>

                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">

                        <li class="active">
                            <a href="#">
                                About
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Works
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                News
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Contacts
                            </a>
                        </li>


                    </ul>


                </div>
            </nav>
        </div>
    </div>
</div>
<!-- close container navbar-->

<!-- header -->
<div class="container">
    <div class="row">
        <header class="col-xs-12 static_header">
            <div class="row">
                <div class="col-xs-12 col-sm-3 hidden-xs logo_header">
                    <img src="images/logo_header.png" />

                </div>

                <div class="col-xs-12 col-sm-9 title_header">
                    <h1>
                        My Title
                    </h1>


                </div>
            </div>


        </header>

    </div>

</div>

<!-- end header -->


<!-- content -->
<div class="container">
    <div>
        <div class="row">
            <div class="col-xs-12" id="content_box">
                <h2>
                    About
                </h2>

                <p>
                   my text
                </p>
                


            </div>


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


<!-- end content -->

<footer class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-4 contact_footer">
                        <a href="#">info@site.com</a><br>
                        <a href="#">+1 234567890</a>
                    </div>
                    <div id="footer_social_bar" class="col-xs-12 col-sm-4">
                        <img src="images/fb.png"/>
                        <img src="images/linkedin.png"/>
                        <img src="images/twitter.png"/>
                    </div>
                    <div class="col-xs-12 col-sm-4 copyright">
                        © 2017, company

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

</footer>

Answer 1

如果您担心使用比您网站上的内容大得多的屏幕的观看者，您可以使用以下css来确保该网站至少与其浏览器一样大。< / p>

＆＃13;

html{
	height:100%;
}
body{
	min-height:100%;
	background-color:#0C0;
}

＆＃13;

<p>I only have a small amount of content. But the body background-color is as big as the screen</p>

＆＃13;

底部的html证明和页脚

1 个答案: