Один div не будет совпадать с остальными xs

Это то, о чем я говорю. https://skullscream.github.io/tributepage/

Когда это col-lg, он хорошо выравнивается, но когда вы полностью уменьшаете его до col-xs и col-sm, абзац «биография» не выравнивается с остальными. Может кто-нибудь объяснить мне, почему это происходит? Я бы предпочел получить объяснение, чем решение :)

HTML

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial;
    background-color: white;
    font-size: 16px;
}

/* Section 1 */

.heading-pictures {
    margin-top: 2%;
}

#top-picture {
    margin-bottom: -4%;
}


.paragraph {
    background-color: #95a5a6;
    padding: 2%;
    color: white;
    text-align: justify;
}

.title {
    position: absolute;
    color: #6c7878;
}

.hd1 {
    font-size: 5.25em;
}

.hd1,
.hd2 {
    text-align: center;
    padding-top: 15%;
    line-height: 1;
}

.hd2 {
    padding-top: 5%;
    border-top: 1px solid #6c7878;
}

.section1 {
    position: relative;
}

div.paragraph-quote {
    margin-bottom: 4%;
    background-color: rgba(0, 0, 0, 0)
}
  
hr.style-one {
    border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}

/* Section 2 */

.inventions {
    width: 100%;
}

.images {
    margin-top: 2%;
}

.section2 p {
    text-align: center;
    font-size: 2.5em;
    color: #6c7878;
    padding-top: 2%;
}

.section2 div {
    padding-bottom: 2%;
}

.tesla-patents p {
    text-align: justify;
    color: white;
    background-color: #95a5a6;
    font-size: 1em;
    padding: 1.5%;
    margin-top: 1%;
}

.tesla-patents p span a {
    color: white;
    background-color: #95a5a6;
    font-style: italic;
    float: right;
    text-decoration: underline;
}

.tesla-patents p span a:hover, 
.tesla-patents p span a:visited {
    color: white;
    background-color: #95a5a6;
    font-style: italic;
    float: right;
    text-decoration: underline;
}

/* Section 3 */

.bio-heading {
    font-size: 2.5em;
    color: #6c7878;
    padding: 0;
    text-align: center;
    margin-top: 1%;
    margin-bottom: 3%;
}

#detailed-bio p {
    text-align: justify;
    color: white;
    background-color: #95a5a6;
    font-size: 1em;
    padding: 1.5%;
    margin-top: 1%;
}

#detailed-bio p a {
    color: white;
    background-color: #95a5a6;
    font-style: italic;
    float: right;
    text-decoration: underline;
}

#detailed-bio p a:hover, 
#detailed-bio p a:visited {
    color: white;
    background-color: #95a5a6;
    font-style: italic;
    float: right;
    text-decoration: underline;
}


footer {
    font-size: .7em;
    margin-bottom: 1%;
    text-align: center;
}

#detailed-bio {
    margin: 0 1% 0 1%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <title>Nikola Tesla, Engineer and Inventor</title>
    <link href="tribute.css" rel="stylesheet" type="text/css">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

  
<head>
  <title>Nikola Tesla, Engineer and Inventor</title>
</head>


<body>
  <div class="container-fluid">
      
      <!-- Section 1 -->
      <div class="row">
          <div class="section1 col-lg-12 col-md-12 col-sm-12 col-xs-12">
           <div class="title col-lg-offset-1 col-lg-3 col-md-offset-1 col-md-3 col-sm-offset-1 col-sm-3 col-xs-12"><p class="hd1">Nikola Tesla</p><p class="hd2">Inventor and Engineer</p></div>
            <div class="heading-pictures col-lg-6 col-lg-offset-1 col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-12">

              <img class="img-responsive" id="top-picture" src="http://www.anonews.co/wp-content/uploads/2016/01/kak_360001.jpg" alt="Image of Nikola Tesla">
            </div>

            <div class="paragraph-quote col-lg-7 col-lg-offset-1 col-md-7 col-lg-offset-1 col-sm-9 col-xs-12">
              <p class="paragraph">"The day science begins to study non-physical phenomena, it will make more progress in one decade than in all the previous centuries of its existence." &nbsp;&nbsp;- Nikola Tesla</p>  
            </div>
          </div> 
      </div>
      
      <hr class="style-one">
      
      <!-- Section 2 -->
      <div class="row">
        <div class="section2 col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <p>What is Nikola Tesla known for?</p>
        <div class="images col-lg-4 col-md-4 col-sm-4 col-xs-12">
            <img class="img-responsive inventions" src="images/hose-coupling-power-cable-strange-black-64025.jpeg">
        </div>
        <div class="images col-lg-4 col-md-4 col-sm-4 col-xs-12">
            <img class="img-responsive inventions" src="images/pexels-photo-109998.jpeg">
        </div>
        <div class="images col-lg-4 col-md-4 col-sm-4 col-xs-12">
            <img class="img-responsive inventions" src="images/sound-speaker-radio-microphone.jpg">
        </div>
      
          <div class="tesla-patents col-lg-12 col-md-12 col-sm-11 col-xs-12">
            <p>Nikola Tesla was an inventor who obtained around 300 patents worldwide for his inventions. Some of Tesla's patents are not accounted for, and various sources have discovered some that have lain hidden in patent archives. There are a minimum of 278 patents issued to Tesla in 26 countries that have been accounted for. Many of Tesla's patents were in the United States, Britain, and Canada, but many other patents were approved in countries around the globe. Many inventions developed by Tesla were not put into patent protection. <span><a href="https://en.wikipedia.org/wiki/List_of_Nikola_Tesla_patents" target="_blank">Source</a></span></p>
          </div>
            </div>
    </div>
      
      <hr class="style-one">
      
      <!-- Section 3 -->
      
    <div class="row">
        <div class="bio-section col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <p class="bio-heading">Biography</p>
         <div id="detailed-bio">   
            <p>Nikola Tesla was born on July 10, 1856 in Smiljan, Lika, which was then part of  the Austo-Hungarian Empire, region of Croatia. His father, Milutin Tesla was a Serbian Orthodox Priest and his mother Djuka Mandic was an inventor in her own right of household appliances. Tesla studied at the Realschule, Karlstadt in 1873, the Polytechnic Institute in Graz, Austria and the University of Prague. At first, he intended to specialize in physics and mathematics, but soon he became fascinated with electricity. He began his career as an electrical engineer with a telephone company in Budapest in 1881. It was there, as Tesla was walking with a friend through the city park that the elusive solution to the rotating magnetic field flashed through his mind. With a stick, he drew a diagram in the sand explaining to his friend the principle of the induction motor. Before going to America, Tesla joined Continental Edison Company in Paris where he designed dynamos. While in Strassbourg in 1883, he privately built a prototype of the induction motor and ran it successfully. Unable to interest anyone in Europe in promoting this radical device, Tesla accepted an offer to work for Thomas Edison in New York. His childhood dream was to come to America to harness the power of Niagara Falls....<span id="read-more-link"><a href="http://www.teslasociety.com/biography.htm" target="_blank">Read more</a></span></p> 
        </div>
      </div>
        
  </div>
      <hr class="style-one">
        <footer>Website created by Milan for FreeCodeCamp. 25.8.2016.</footer>
   
    </div>
</body>
</html>


html css twitter-bootstrap responsive
person Aiden P    schedule 26.08.2016    source источник
comment
If you need the code, you can download the zip file here https://github.com/skullscream/tributepage , нет, если вам нужна помощь, поместите код сюда   -  person Mihai T    schedule 26.08.2016
comment
добавьте немного кода, вопрос не ясен   -  person Maciej Wojcik    schedule 26.08.2016
comment
@MihaiT Я, хотя, потому что это длинный код, было бы нечисто делать, но я добавлю его.   -  person Aiden P    schedule 26.08.2016
comment
биография кажется выровненной, не выровненной является .tesla-patents, потому что у нее есть эти классы: col-md-11 col-sm-11 измените их на 12 вместо 11   -  person Mihai T    schedule 26.08.2016
comment
Да, я изменил их сейчас, когда понял это. Но биография ни в чем другом, кроме col-lg, не строится. Ну, по крайней мере, когда я изменяю его размер. Вы можете видеть в xs на скриншоте, что абзац переходит. скриншот   -  person Aiden P    schedule 26.08.2016

Ответы (3)


arrow_upward
2
arrow_downward

Это потому, что вы неправильно используете синтаксис начальной загрузки (частично).

При использовании столбцов чередуйте столбцы и строки. В настоящее время вы вкладываете столбцы в столбцы.

container
|   row
|   |   column
|   |   |   row
|   |   |   |   column
|   |   |   |   column
|   |   |   row
|   |   |   |   column
|   |   |   |   column
|   |   column

Это также может вам помочь: Руководство по начальной загрузке

Скорректированный код:

Удалите поле на #detailed-bio и настройте код следующим образом:

<div class="container-fluid">
    <!-- Section 1 -->
    <div class="row">
        <div class="section1 col-xs-12">
            <div class="row">
                <div class="title col-lg-offset-1 col-lg-3 col-md-offset-1 col-md-3 col-sm-offset-1 col-sm-3 col-xs-12">
                    <p class="hd1">Nikola Tesla</p>
                    <p class="hd2">Inventor and Engineer</p>
                </div>

                <div class="heading-pictures col-lg-6 col-lg-offset-1 col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-12">
                    <img class="img-responsive" id="top-picture" src="http://www.anonews.co/wp-content/uploads/2016/01/kak_360001.jpg" alt="Image of Nikola Tesla">
                </div>

                <div class="paragraph-quote col-lg-7 col-lg-offset-1 col-md-7 col-lg-offset-1 col-sm-9 col-xs-12">
                    <p class="paragraph">"The day science begins to study non-physical phenomena, it will make more progress in one decade than in all the previous centuries of its existence." &nbsp;&nbsp;- Nikola Tesla</p>
                </div>
            </div>
        </div>
    </div>

    <hr class="style-one">

    <!-- Section 2 -->
    <div class="row">
        <div class="section2 col-xs-12">
            <div class="row">
                <div class="col-xs-12">
                    <p>What is Nikola Tesla known for?</p>
                </div>
                <div class="images col-lg-4 col-xs-12">
                    <img class="img-responsive inventions" src="images/hose-coupling-power-cable-strange-black-64025.jpeg">
                </div>
                <div class="images col-lg-4 col-xs-12">
                    <img class="img-responsive inventions" src="images/pexels-photo-109998.jpeg">
                </div>
                <div class="images col-lg-4 col-xs-12">
                    <img class="img-responsive inventions" src="images/sound-speaker-radio-microphone.jpg">
                </div>

                <div class="tesla-patents col-xs-12">
                    <p>Nikola Tesla was an inventor who obtained around 300 patents worldwide for his inventions. Some of Tesla's patents are not accounted for, and various sources have discovered some that have lain hidden in patent archives. There are a minimum of 278 patents issued to Tesla in 26 countries that have been accounted for. Many of Tesla's patents were in the United States, Britain, and Canada, but many other patents were approved in countries around the globe. Many inventions developed by Tesla were not put into patent protection. <span><a href="https://en.wikipedia.org/wiki/List_of_Nikola_Tesla_patents" target="_blank">Source</a></span></p>
                </div>
            </div>
        </div>
    </div>

    <hr class="style-one">

    <!-- Section 3 -->

    <div class="row">
        <div class="bio-section col-xs-12">
            <p class="bio-heading">Biography</p>
            <div id="detailed-bio">
                <p>Nikola Tesla was born on July 10, 1856 in Smiljan, Lika, which was then part of  the Austo-Hungarian Empire, region of Croatia. His father, Milutin Tesla was a Serbian Orthodox Priest and his mother Djuka Mandic was an inventor in her own right of household appliances. Tesla studied at the Realschule, Karlstadt in 1873, the Polytechnic Institute in Graz, Austria and the University of Prague. At first, he intended to specialize in physics and mathematics, but soon he became fascinated with electricity. He began his career as an electrical engineer with a telephone company in Budapest in 1881. It was there, as Tesla was walking with a friend through the city park that the elusive solution to the rotating magnetic field flashed through his mind. With a stick, he drew a diagram in the sand explaining to his friend the principle of the induction motor. Before going to America, Tesla joined Continental Edison Company in Paris where he designed dynamos. While in Strassbourg in 1883, he privately built a prototype of the induction motor and ran it successfully. Unable to interest anyone in Europe in promoting this radical device, Tesla accepted an offer to work for Thomas Edison in New York. His childhood dream was to come to America to harness the power of Niagara Falls....<span id="read-more-link"><a href="http://www.teslasociety.com/biography.htm" target="_blank">Read more</a></span></p>
            </div>
        </div>

    </div>
    <hr class="style-one">
    <footer>Website created by Milan for FreeCodeCamp. 25.8.2016.</footer>
</div>

(удалены ненужные классы начальной загрузки)

person AlexG    schedule 26.08.2016
comment
Итак, вы говорите, что я должен добавить еще одну строку и еще один столбец после .bio-section? Пробовал, все равно как-то так. - person Aiden P; 26.08.2016
comment
Исправлено. Теперь он работает потрясающе. БЛАГОДАРНОСТЬ!!! Заработало ли только удаление ненужных классов и маржи на #detailed-bio или было что-то еще? (Кстати, теперь я узнал, что мне не всегда нужны все классы col, хотя я должен был иметь их все) - person Aiden P; 26.08.2016
comment
Проблема заключалась в несоответствии между строками и столбцами :) И некоторые классы col были не нужны, потому что самый маленький столбец работает и с большими столбцами, если не указано иное. например col-xs-4 всегда будет 4 столбца - col-xs-4 col-md-8 будет 4 столбца в xs,sm и 8 столбцов в md,lg. Конечно, вы можете продолжать занятия, это просто мое предпочтение. Делает код чище - person AlexG; 26.08.2016
comment
Mindblown :P да, выглядит аккуратнее, если нет лишнего кода. - person Aiden P; 27.08.2016

arrow_upward
1
arrow_downward

Изменить этот раздел

<div id="detailed-bio">
  <p></p>
</div>

To

<div id="detailed-bio" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <p></p>
</div>
person Sidharth Gusain    schedule 26.08.2016
comment
Это усугубляет проблему в xs. - person AlexG; 26.08.2016

arrow_upward
0
arrow_downward

увеличьте левое и правое поля детализированного био на 2%. Как ниже

#detailed-bio { margin: 0 2% 0 2%; }

person Paramaguru Manickavasagam    schedule 26.08.2016
comment
Это заставляет col-lg масштабироваться по-разному. - person Aiden P; 26.08.2016
comment
добавьте этот стиль только к определенному медиа-запросу col-xs. например, см. ниже: экран @media only и (min-width: 768px){ } - person Paramaguru Manickavasagam; 26.08.2016