个人中心
gpt4 book ai didi

html - 页脚不使用 Bootstrap 类扩展

转载 作者：行者123 更新时间：2023-11-27 23:34:58 26 4
gpt4 key购买 nike

我在根据我使用 Bootstrap 的设计来组合我的页面时遇到了问题。我将提供以下 html 代码，看看是否有人可以帮助我理解为什么我的页脚不是页面的整个宽度以及为什么我的紫色框类是。

enter image description here

如果您可以查看我的 html 代码，看看您是否也可以向我解释为什么我在类(class)下的图像也不是全宽，因为我将它设置为 100% 宽度，我理解它与它的父级相比container 这将是具有容器类的 div。

链接到实际的开发站点页面。 Dev Lessons Site Page 

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="A great site to hear the musical talents of Cassandra Davidson and also to promote her as a private instructor.">
        <meta name="keywords" content="music, teacher, lessons, weddings, church">
        <meta name="author" content="Jeffrey Davidson">
        <title>Cassandra Davidson Studio</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link href="assets/css/main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="container-fluid">
            <header>
                <h1>Cassandra Davidson Studio</h1>
                <nav>
                    <ul>
                        <li><a id="active" href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="lessons.html">Lessons</a></li>
                        <li><a href="recordings.html">Recordings</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </nav>
            </header>
            <h2>Lessons</h2>
            <div class="row">
                <div class="col-xs-12">
                    <img src="assets/images/music-staff.png" alt="Music staff">
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <h3>About Your Lessons</h3>
                    <p>Lessons are face to face once a week for 30 minutes or 60 minutes.  Times based on age, and level of interest.  Lessons are given for students to gain knowledge of the flute.  They will learn flute techniques, musicality, and standard flute works.  Students will learn to perform for others and gain confidence in themselves and their playing.</p>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6">
                    <h3>Practice</h3>
                    <p>Students are expected to practice every day.  Students in a 30 minute lessons should be practicing for at least 30 minutes every day, while students in 60 minute lessons should be practicing for at least 60 minutes.</p>
                </div>
                <div class="col-xs-6">
                    <h3>Materials</h3>
                    <p>Student should bring with them to lessons books decided by the instructor at their first lesson, and a spiral notebook.  There may be more needs as the student moves on in lessons.  These book will include, a tone book, technique book, etude book and solo material.  For beginning students they should also bring the book being used in their band class.</p>
                </div>
            </div>
            <div class="row">   
                <div class="col-xs-6">
                    <h3>Recitals</h3>
                    <p>The studio will give at least two recitals throughout the year.  Students are expected to play for these recitals and stay to listen to their peers.  If a student needs to miss, there will need to be approval beforehand.  Recitals are a good opportunity for students to learn from others and to hear different pieces of music.</p>
                </div>  
                <div class="col-xs-6">
                    <h3>Masterclasses</h3>
                    <p>The studio will provide a masterclass situation about three times a year.  This may be all students of the same age together in a joint lesson with the teacher, bringing in another instructor to give feedback, or a few students playing solo and getting feedback from the other students as well as the instructor.  The students are expected to attend these classes, so they can benefit from hearing other students, playing with students, and getting feedback from another source.</p>
                </div>  
            </div>
            <div class="row">
                <div class="col-xs-6">
                    <h3>Payment</h3>
                    <p>Payment is due at the beginning of every month, for the entire month.   The cost is $25 per lesson for 30 minute lessons and $50 per lesson for 60 minute lessons.  This cost includes all expenses for the recitals and masterclasses, so there are no extra fees for those events.</p>
                </div>  
                <div class="col-xs-6">
                    <img src="assets/images/girl-playing-piano.png" alt="Girl looking at camera while playing piano.">
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 purple-box">
                    <h3>Cancellation/Make-up</h3>
                    <p>If a student cannot attend lessons for any reason, please call the instructor as soon as possible.  If possible at the beginning of each month, let the instructor know if the students cannot attend any lesson that month.  If the instructor receives at least 24 hour notice than there will be a make-up lesson scheduled if possible or a credit for the next month.  Make-up lessons are always preferred and the use of a credit should only be used if a make-up lesson cannot be scheduled because of conflicts.  If a student does not show up for a lesson without notifying the instructor there will be no make-up lesson or credit.  If the instructor must miss for any reason, they will contact the students as soon as possible and schedule a make-up lesson or give a credit.</p>
                </div>  
            </div>  
            <footer>
                <div class="row">
                    <div class="col-xs-12">
                        <p>&copy; 2015 Jeffrey Davidson</p>
                    </div>
                </div>  
            </footer>
        </div>      
        <script type="text/javascript" src="assets/js/jquery-2.1.4.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </body>
</html>

最佳答案

简化您的标记。

row 类提供左右负边距 (-15px)，以便列在其中正确显示。

col 类元素有 15px 的左右填充以提供“内部”间距，但这会导致左/右边缘有 15px 的空间，这就是为什么 row 列有负边距。

footer 中的 div.row 是不必要的，导致了额外的空间。

<footer class="row">
    <div class="col-xs-12">
        <p>&copy; 2015 Jeffrey Davidson</p>
    </div>
</footer>

至于图片，它上面没有任何样式，因此没有填满整个宽度。 (我已经使用浏览器检查器检查了您的实时网站，上面肯定没有样式)。

给它一个类，或者直接应用样式，这样:

img {
    width: 100%;
    height: auto; /* without this, the image will skew */
}

最后，对于您的左/右间距，经过深思熟虑后，为了使其具有响应性，您最好的选择是使用一些标记/css 来提供“最大宽度”空间。如果您使用填充，则必须在每次媒体查询/踢时调整填充，而您真正想要的是在较大的桌面尺寸下留出一些空间。

就个人而言，为了清楚起见，我喜欢创建一个名为“liner”或类似名称的 div，如下所示:

<footer class="row">
    <div class="liner">
        <div class="col-xs-12">
            <p>&copy; 2015 Jeffrey Davidson</p>
        </div>
    </div>
</footer>

然后，给那个衬里一些像这样的 css:

div.liner {
    margin: 0 auto; /* auto ensures it will stay centered */
    padding: 0; /* may or may not be necessary depending on your resets */
    max-width: 1000px; /* or whatever your desired max width is */
}

将此 .liner 添加到页眉、页脚和主要内容区域，您将获得所需的效果。

关于html - 页脚不使用 Bootstrap 类扩展，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34254317/

26 4 0
文章推荐： css - CSS 中的下拉菜单无法正常工作
文章推荐： javascript - jQuery Mobile 在新页面上打开单个 json 对象
文章推荐： html - 有没有办法用 css 定位边框(图像示例)？
文章推荐： javascript - AmCharts parseDates 意外行为并合并图表中的所有条形图
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com