非常简单的HTML,但我的Bootstrap列不是并排的,而是垂直堆叠的。

问题描述 投票:0回答:1

如果我把Lorem ipsum变短,它就会撞到同一行,然而它应该是在图像旁边。我知道我错过了一些小东西,但我似乎找不到任何帮助,开始感到非常沮丧。 布局应该是左边是相册的图片(约占页面的13),右边是标题和段落。(关于padding, spacing, centering等格式不在课程范围内.只是bootstrap中的列和行。我试过把列改成9和3,甚至6和6,但是没有任何作用。我已经调整了我的屏幕大小等等。它被设置为中等的原因是它想要这些设置为med和大,所以这是什么使用。谢谢!我的代码是这样的

这是我的代码。 我已经把顶部和头部的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>

html multiple-columns
1个回答
0
投票

我相信只是一个印刷错误。你的列类应该是 "col-md-4 "和 "col-md-8",而不是 "col-med-4 "和 "col-med-8"。

© www.soinside.com 2019 - 2024. All rights reserved.