← Комьюнити

Какую ошибку видит система в bootstrape?

Serhii Starchenko11 ответов

Задание: Задайте класс фреймворка Bootstrap таким образом, чтобы при размере экрана менее 768px правый блок скрывался. Для того, чтобы менять размер окна виртуального браузера, перемещайте ползунок влево или вправо. CSS стили не изменяйте

код:

<div class="container">
<div class="col-md-9 col-xs-9 col-sm-9 color-left-block">
<h3>Left block</h3>
</div>
<div class="col-sm-3 col-xs-3 col-sm-3 color-right-block">
<h3>Right block</h3>
</div>
</div>

ответ:

<div class="container">
<div class="row">
<div class="col-md-9 col-xs-9 col-sm-9 color-left-block">
<h3>Left block</h3>
</div>
<div class="col-sm-3 hidden-xs col-sm-3 color-right-block">
<h3>Right block</h3>
</div>
</div>
</div>

там в правом блоке дважды указано sm! Меняю на md - ничего. Поэтому, добавляю класс row. Меняю col-xs-3 на hidden-xs! Подставляю написанную часть кода в свой проект - исчезает правый блок при масштабировании.

Где ошибка? Спасибо

11 ответов

изменил hidden-xs на col-hidden-xs, ПРОБЛЕМА НЕ РЕШЕНА!

Serhii Starchenko

Здравствуйте, Serhii

Спасибо за ваш вопрос!

Это ошибка в задании. Спасибо, что написали, в скором времени поправим!

Alex Kuznetsov

Алексей, спасибо за помощь!

Serhii Starchenko

В задании уже заменено sm на md.

Пишу код

<div class="container">
<div class="row">
<div class="col-md-9 col-xs-9 col-sm-9 color-left-block">
<h3>Left block</h3>
</div>
<div class="col-sm-3 hidden-xs col-sm-3 color-right-block">
<h3>Right block</h3>
</div>
</div>
</div>

окно просмотра отображает необходимые изменения при масштабировании! Но ответ не принимается! В чем причина?

Serhii Starchenko

В задании сказано, что:

при размере экрана менее 768px правый блок скрывался.

Там нужно добавить класс hidden-xs, чтобы правый блок скрылся при разрешении менее 768px.

<div class="container">
        <div class="col-md-9 col-xs-9 col-sm-9 color-left-block">
             <h3>Left block</h3> 
        </div>
        <div class="col-md-3 col-xs-3 col-sm-3 hidden-xs color-right-block">
             <h3>Right block</h3> 
        </div>
</div>

Также говорится, что:

Ваш код напишите между col-sm-3 и color-right-block.

Вы пишите два раза класс col-sm-3:

<div class="col-sm-3 hidden-xs col-sm-3 color-right-block">

Есть кнопка справа сверху "Показать ответ"

student_m97_nM0x

там где, показать ответ - показывает визуальное следствие прописанного кода! Я вижу результат  код работает! Но где посмотреть правильный код к заданию?

и это не принимает система (в плане ответа) - визуально все работает:

<div class="container">
<div class="row">
<div class="col-md-9 col-xs-9 col-sm-9 color-left-block">
<h3>Left block</h3>
</div>
<div class="col-md-3 col-sm-3 hidden-xs color-right-block">
<h3>Right block</h3>
</div>
</div>
</div>

Ладно, не будем терять время. Процентов на 95 я уверен в правильности кода. Идем дальше.

Serhii Starchenko

единственное, в этом случае,  что меня интересует, так это размещение hidden-xs в строке:

"col-md-3 col-sm-3 hidden-xs color-right-block">

Разве, играет роль место его вставки: в начале, в средине, в конце! Я вчера целый день читал о Bootsrape - ни единого упоминания по этому поводу!!!

Serhii Starchenko

Роли не играет, в какой последовательности писать классы, это особенности системы проверки заданий. 

student_5X1YqLbg

И в 14 задании опечатка sm:

<div class="container">
<div class="col-md-9 col-xs-9 col-sm-9 color-left-block">
<h3>Left block</h3>
</div>
<div class="col-sm-3 col-xs-3 col-sm-3 color-right-block">
<h3>Right block</h3>
</div>
</div>

Что-то Bootstrap никак не идет сегодня! 

Serhii Starchenko

Система приняла Ваш ответ:

<div class="container">

<div class="col-md-9 col-xs-9 col-sm-9 color-left-block"> <h3>Left block</h3>

</div>

<div class="col-md-3 col-xs-3 col-sm-3 hidden-xs color-right-block"> <h3>Right block</h3>

</div>

</div>

А где строки: <div class="row"></div>? 

Serhii Starchenko

Спасибо, что внесли исправление в 14 задание  Bootstrap3!

Serhii Starchenko