Question

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

如果你可以查看我的html代码，看看你是否可以向我解释为什么我在Lessons下的图像也不是全宽，因为我将它设置为100％宽度我理解它与它的父母相比容器，它将是一类容器的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>

Answer 1

简化您的标记。

row类左右提供负边距（-15像素），以便列在其中正确显示。

col类元素左右有15px填充以提供间距＆＃34;内部＆＃34;，但这导致左/右边缘的15px空间，这就是{{1列有负边距。

row内的div.row是不必要的，并且会造成额外的空间。

footer

至于图像，它上面没有任何样式，因此它没有填充整个宽度。（我已经使用浏览器检查器检查了您的实际网站，并且肯定没有样式）。

给它一个类，或直接应用样式，以便：

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

最后，考虑到你的左/右间距，为了使其具有响应性，最好的办法是使用一些标记/ css来提供＆＃34;最大宽度＆＃34;在空间上。如果你使用了填充，你必须在每个媒体查询/踢的时候调整填充，你真正想要的是更大桌面尺寸的空间。

就个人而言，为了清楚起见，我喜欢创建一个名为＆＃34; liner＆＃34;或类似的，如：

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

然后，给那个班轮一些像这样的css：

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

将此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 */ }添加到页眉，页脚和主要内容区域，您将获得所需的效果。

Answer 2

为页脚添加行类并将其删除为内部div（然后您可以安全地删除该div）：

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

为了使您的页面外观与图像进一步匹配，您可以向＆lt; p＆gt;添加一些填充。在一个页脚：

footer p {
    padding: 10px 0;
}

只需调整填充值即可获得所需的效果。

不使用引导类

2 个答案: