我似乎无法在CodePen中分割我的图像和段落

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

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <p id="p1" class="box">I am an Art and Computer Science student. I love mixing my art background with web development and design. My goal is to find a job in the web development industry. In my spare time I love playing sports and board games.</p>
    </div>

    <div class="col-md-6">
      <img class="pic" src="https://beebom-redkapmedia.netdna-ssl.com/wp-
        content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-
        2016.jpg" alt="filter for now: cat"></div>
  </div>
</div>

我正在使用CodePen并尝试使用引导网格分割这两个东西(p和img),它不会分裂。图像保留在段落下方。

html bootstrap-4 codepen
1个回答
0
投票

您可能没有包含引导程序的链接。这里我链接头标签内的bootstrap cdn。

<html>  
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    </head>
    <body>
        <div class="container-fluid">
          <div class="row">  
            <div class="col-md-6">
            <p id="p1" class="box">I am an Art and Computer Science student. I love 
            mixing my art background with web development and design. My goal is to 
            find a job in the web development industry. In my spare time I love 
            playing sports and board games.</p></div> 

            <div class="col-md-6">
            <img class="pic" src="https://beebom-redkapmedia.netdna-ssl.com/wp-
            content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-
            2016.jpg" alt="filter for now: cat"></div>
          </div>
        </div>
    </body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.