Очень просто HTML, но мои Bootstrap столбцы не расположены рядом, они располагаются вертикально - PullRequest
0 голосов
/ 24 апреля 2020

Если я уменьшу Lorem ipsum, он попадет в тот же ряд, однако он должен быть рядом с изображением. Я знаю, что упускаю что-то маленькое, но я не могу найти ничего, что помогает и начинает чувствовать разочарование. Макет должен выглядеть как изображение альбома слева (около 1/3 страницы), а также заголовок и абзац справа от него. (форматирование в отношении отступов, интервалов, центрирования и т. д. c не является частью урока. только столбцы и строки в bootstrap. Я попытался изменить столбцы на 9 и 3, или даже на 6 и 6, но это не так. ничего не делаю. Я изменил размер моего экрана и т. д. c. Причина, по которой он установлен на средний уровень, заключалась в том, что он хотел получить эти настройки для средних и средних значений, так что это было то, что нужно использовать. Спасибо!

Вот мой код:
У меня есть Doctype сверху и голова правильно сделана, но я пока не знаю, как их надеть. Извините. Все еще учусь там.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Music Store</title>
<link rel='stylesheet' href='styles/bootstrap.min.css'/>

<div class = "container">
    <div class = "jumbotron">
        <h1>Music Store</h1>
    </div>
</div>
<div class = "container">
<div class="row">
    <div class="col-med-4">
        <img src="img/Album.png" >
    </div>

    <div class="col-med-8">
        <h2>Album Title <br>Artist</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
  </div>
</div>
<script src="scripts/jquery-3.5.0.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>

1 Ответ

0 голосов
/ 24 апреля 2020

Я просто опечатка. Ваши классы столбцов должны быть "col-md-4" и "col-md-8", а не "col-med-4" и "col-med-8".

...