如何在html页面中排列这些引导元素_Html_Css_Bootstrap 4

如何在html页面中排列这些引导元素

html css bootstrap-4

如何在html页面中排列这些引导元素,html,css,bootstrap-4,Html,Css,Bootstrap 4,我想用html和Bootstrap4创建一个网页，但我在按照这个模板安排页面时遇到了问题带引导v4的Hepatrote Hepatrote 以下是使用bootstrap 4的图像的基本结构，这不是响应性的，因此您需要进行一些工作以实现响应性代码：带引导v4的Hepatrote Hepatrote 症状 Lorem ipsum，或者有时称之为lipsum，是用于布置印刷品、图形或网页设计的虚拟文本。这段文字被认为是15世纪一位不知名的排字工人的作品，他将西塞罗的《德菲尼布斯·博诺拉姆

我想用html和Bootstrap4创建一个网页，但我在按照这个模板安排页面时遇到了问题


带引导v4的Hepatrote
Hepatrote

以下是使用bootstrap 4的图像的基本结构，这不是响应性的，因此您需要进行一些工作以实现响应性

代码：


带引导v4的Hepatrote
Hepatrote
症状
Lorem ipsum，或者有时称之为lipsum，是用于布置印刷品、图形或网页设计的虚拟文本。这段文字被认为是15世纪一位不知名的排字工人的作品，他将西塞罗的《德菲尼布斯·博诺拉姆与马洛拉姆》中的一部分拼凑起来，用在一本字体样本书中
死亡意象
症状
Lorem ipsum，或者有时称之为lipsum，是用于布置印刷品、图形或网页设计的虚拟文本
图1
症状1
图1
症状1
图1
症状1
图1
症状1

main{
宽度：90%；
}
#maincss{
位置：相对位置；
身高：100%；
宽度：100%；
保证金：自动；
}
#梅因科尔{
位置：相对位置；
填充：1rem；
保证金：自动；
}
#维护{
位置：相对位置；
最大宽度：100%；
}
#3rdcss{
位置：相对位置；
最小高度：100%；
}
img{
位置：相对位置；
宽度：100%；
}
#第三列{
位置：相对位置；
最小高度：100%；
保证金：自动；
}
#卡兹科尔{
位置：相对位置；
保证金：自动；
填充：0.5雷姆；
}


带引导v4的Hepatrote
Hepatrote
标题
文本相关
标题
还有一些文本要显示
[卡片-1]
此处有一些文本
[卡片-2]
此处有一些文本
[卡片-3]
此处有一些文本
[卡片-4]
此处有一些文本
[页脚]

只要您使用Bootstrap4，您就需要阅读更多关于bs网格基础知识的内容，您可以从这张Hi@Patrik Patel中学习，在bootstrap卡中，我想将图像添加到左侧，与我发布的图像完全一致。我该怎么做？我已经更改了上面的代码，请检查

    <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <title>Hepatrote with Bootstrap v4</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 </head>
  <body>
    
<header class="d-flex justify-content-between flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
  <p class="h5 my-0 me-md-auto fw-normal">Hepatrote</p>
  <nav class="my-2 my-md-0 me-md-3">
    <a class="p-2 text-dark" href="#">Accueil</a>
    <a class="p-2 text-dark" href="#">Blog</a>
    <a class="p-2 text-dark" href="#">Symptoms</a>
    <a class="p-2 text-dark" href="#">Contacts</a>
  </nav>
</header>

<main class="container">
  <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto">
    <div class="row">
      <div class="col">
        <h1>Symptoms</h1>
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
      </div>
      <div class="col">
      <h1>Image of dieses</h1>
      </div>
    </div> 
    
    <div class="row">
      <div class="col-12">
        <h1 class="text-center">Syptoms</h1>
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
      </div>
      <div class="row">
        <div class="col-6 ">
            <div class="card">
              <div class="card-body">
                <div class="w-50 d-inline-block" >
                  <h5>Image1</h5>
                </div>
                <div class="w-50 d-inline-block">
                  <h5>Sympt1</h5>
                </div>
              </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card">
              <div class="card-body">
                <div class="w-50 d-inline-block" >
                  <h5>Image1</h5>
                </div>
                <div class="w-50 d-inline-block">
                  <h5>Sympt1</h5>
                </div>
              </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card">
              <div class="card-body">
                <div class="w-50 d-inline-block" >
                  <h5>Image1</h5>
                </div>
                <div class="w-50 d-inline-block">
                  <h5>Sympt1</h5>
                </div>
              </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card">
              <div class="card-body">
                <div class="w-50 d-inline-block" >
                  <h5>Image1</h5>
                </div>
                <div class="w-50 d-inline-block">
                  <h5>Sympt1</h5>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
  <footer class="pt-4 my-md-5 pt-md-5 border-top">
  </footer>
</main>
  </body>
</html>