2015-12-13 5 views
2

У меня возникли проблемы с составлением моей страницы на основе моего дизайна с помощью Bootstrap. Я предоставлю следующий html-код и посмотрю, сможет ли кто-нибудь помочь мне понять, почему мой нижний колонтитул не является полной шириной страницы и почему мой класс фиолетовых ящиков.Footer не распространяется на классы начальной загрузки

enter image description here

Если вы можете просмотреть свой HTML код и посмотреть, если вы можете объяснить мне и почему мой образ под Уроков не полная ширина, а потому что я поставил его на ширину 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> 

ответ

2

Упростите разметку.

Класс row обеспечивает отрицательный запас (-15px) влево и вправо, чтобы столбцы отображались правильно внутри них.

Элементы класса col имеют прописку 15px влево и вправо, чтобы обеспечить интервал «внутренне», но это вызывает 15px пространства на левом/правом краю, поэтому столбец row имеет отрицательный запас.

div.row внутри footer не требовалось, что вызывало дополнительное пространство.

<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 для обеспечения «максимальной ширины» на пространствах. Если вы использовали прописку, вам нужно будет отрегулировать прописку на каждом запросе/ударе по медиа, где действительно то, что вам нужно, - это пространство на больших размерах рабочего стола.

Лично для ясности, я хотел бы создать 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 в ваш заголовок, нижний колонтитул и область основного контента, и вы получите желаемый эффект.

+0

О, да, я думал, что у меня была ширина, равная 100%, возможно, я удалил ее во время тестирования по какой-то причине. Спасибо. – user3732216

+0

Теперь, если вы заметили, что основное содержание проекта, которое я сделал, было в общей сложности 130 пикселей на дизайн 1200 пикселей. На моих 27 дюймах это не делает. Можете ли вы объяснить, почему это мне понять? – user3732216

+1

Какая часть 130px? Я смотрю в основном содержании - вы говорите о ширине столбцов? Извините, я не уверен, в какой части вы ссылаетесь. Приятно смотреть/помогать, если вы можете уточнить. –

1

Добавить класс строки для колонтитула и удалить его сОн внутри (то вы можете смело удалить этот DIV):

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

Чтобы соответствовать вашей странице взглянуть на изображение дальше, вы можете добавить отступы к < р > в сноске:

footer p { 
    padding: 10px 0; 
} 

Просто отрегулируйте значение заполнени, чтобы получить желаемый эффект.

+0

А как насчет изображения? –

+0

@cale_b Надеюсь, мое обновление вам поможет. – Keammoort

+0

Да, это не объясняет, почему изображение не является полной шириной. Еще раз внимательно прочитайте вопрос. –