引导程序并排网格视图

Question

我在引导程序中遇到网格问题。我正在尝试创建一个并排和图像的导航。左侧的图像和右侧的文本，顶部带有导航栏。我尝试使用

<div class="row">
    <div class="col">

但是不能给我我想要的结果。

我想要的结果： 。

我的代码：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <h1 class="text-center">About Me</h1>
  <nav>
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
      <a aria-controls="nav-info" aria-selected="true" class="nav-item nav-link active" data-toggle="tab" href="#nav-info" id="nav-info-tab" role="tab"><i class="fas fa-info"></i> General Info</a> <a aria-controls="nav-experience" aria-selected="false"
        class="nav-item nav-link" data-toggle="tab" href="#nav-experience" id="nav-experience-tab" role="tab"><i aria-hidden="true" class="fa fa-user"></i> Experience</a> <a aria-controls="nav-education" aria-selected="false" class="nav-item nav-link" data-toggle="tab"
        href="#nav-education" id="nav-education-tab" role="tab"><i aria-hidden="true" class="fa fa-university"></i> Education</a> <a aria-controls="nav-work" aria-selected="false" class="nav-item nav-link" data-toggle="tab" href="#nav-work" id="nav-work-tab"
        role="tab"><i aria-hidden="true" class="fa fa-book"></i> Work</a>
    </div>
  </nav>
  <div class="row">
    <div class="col">
      <div class="tab-content" id="nav-tabContent">
        <div class="col-sm-6">
          <div class="text-center"><img alt="avatar edgaraxe" class="img-fluid rounded-circle wow fadeIn" data-wow-delay="1s" src="http://icons.iconseeker.com/png/fullsize/black-power-emoticons/anger-512x512.png"></div>

        </div>
      </div>
      <div aria-labelledby="nav-info-tab" class="tab-pane fade show active" id="nav-info" role="tabpanel">

      </div>
      <div aria-labelledby="nav-experience-tab" class="tab-pane fade" id="nav-experience" role="tabpanel">
        <i class="fas fa-language"></i> <b>Languages</b>

        <div aria-labelledby="nav-education-tab" class="tab-pane fade" id="nav-education" role="tabpanel">
          <i class="fas fa-university"></i> <b>Alma mater</b><br>

        </div>
        <div aria-labelledby="nav-work-tab" class="tab-pane fade" id="nav-work" role="tabpanel">
          <i class="fas fa-briefcase"></i> <b>Freelancer.com</b><br>

        </div>
      </div>
    </div>
  </div>

Answer 1

在这里，工作代码的左侧为图片，右侧为文本，顶部为导航栏：

<div class="container">
  <h1 class="text-center">About Me</h1>
  <nav>
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
      <a aria-controls="nav-info" aria-selected="true" class="nav-item nav-link active" data-toggle="tab" href="#nav-info" id="nav-info-tab" role="tab"><i class="fas fa-info"></i> General Info</a> <a aria-controls="nav-experience" aria-selected="false"
        class="nav-item nav-link" data-toggle="tab" href="#nav-experience" id="nav-experience-tab" role="tab"><i aria-hidden="true" class="fa fa-user"></i> Experience</a> <a aria-controls="nav-education" aria-selected="false" class="nav-item nav-link" data-toggle="tab"
        href="#nav-education" id="nav-education-tab" role="tab"><i aria-hidden="true" class="fa fa-university"></i> Education</a> <a aria-controls="nav-work" aria-selected="false" class="nav-item nav-link" data-toggle="tab" href="#nav-work" id="nav-work-tab"
        role="tab"><i aria-hidden="true" class="fa fa-book"></i> Work</a>
    </div>
  </nav>


      <div class="tab-content" style="display: inline-block"  id="nav-tabContent">
        <div class="row">
        <div class="col-6">
            <img alt="avatar edgaraxe" class="img-fluid rounded-circle wow fadeIn" data-wow-delay="1s" src="http://icons.iconseeker.com/png/fullsize/black-power-emoticons/anger-512x512.png">
        </div>
        <div class="col-6">
        <div aria-labelledby="nav-info-tab" class="tab-pane fade show active" id="nav-info" role="tabpanel">

        </div>
        <div aria-labelledby="nav-experience-tab" class="tab-pane fade" id="nav-experience" role="tabpanel">
          <i class="fas fa-language"></i> <b>Languages</b>
        </div>
        <div aria-labelledby="nav-education-tab" class="tab-pane fade" id="nav-education" role="tabpanel">
          <i class="fas fa-university"></i> <b>Alma mater</b><br>

        </div>
        <div aria-labelledby="nav-work-tab" class="tab-pane fade" id="nav-work" role="tabpanel">
          <i class="fas fa-briefcase"></i> <b>Freelancer.com</b><br>

        </div>
        </div>
    </div>
   </div>
   </div>

朋克：http://plnkr.co/edit/i4YBtRTL6QCUhjoWboNq?p=preview