为什么col-4和col-8不在没有任何CSS的同一行？

Question

我在col-12和row中有两列col-4和col-8。但是这两列不在同一行。即使我没有编写任何CSS只是自举网格，我也无法理解为什么会发生这种情况。

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row" id="first_row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
        <img src="img/nahid.jpg" class="img-fluid" alt="Responsive image" id="avater_main">
      </div>
      <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Home</div>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">About</div>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Portfolio</div>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Contact</div>
      </div>
    </div>
  </div>

Answer 1

不需要12格的额外父容器。

移除

所需的div

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

另外，使用代码段附加工作演示

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row" id="first_row">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
      <img src="img/nahid.jpg" class="img-fluid" alt="Responsive image" id="avater_main">
    </div>
    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Home</div>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">About</div>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Portfolio</div>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Contact</div>
    </div>
  </div>
</div>

Answer 2

每个列在Bootstrap中都需要一个父行。

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row" id="first_row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <!-- Row added here. -->
      <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <img src="//placehold.it/64x64" class="img-fluid" alt="Responsive image" id="avater_main">
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
         <!-- And a row here. -->
          <div class="row">
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Home</div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">About</div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Portfolio</div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Contact</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;