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

Question

<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 并尝试使用 bootstrap 网格拆分这两个东西（p 和 img），但它不会拆分。图像位于段落下方。

Answer 1

您可能没有包括 link 到 bootstrap。我在这里 link 在 header 标签内 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>

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

I can't seem to split my image and paragraph in CodePen

html

bootstrap-4

codepen