我不希望divs并排

Question

我不希望divs并排。我怎么能解决这个问题

搜索 - > false

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row ">
  <div class="col-md-8 "></div>
  <div class="col-md-4 d-flex justify-content-start">
    <div class="search">
      <p>search</p>
    </div>
    <div class="about">
      <p>about</p>
    </div>
  </div>
</div>

Answer 1

你试过div之间的<br/>标签吗？

Answer 2

从div中删除class =“col-md-4”

Answer 3

.search {border: 1px solid #000; display: block!important;}
.about {border: 1px solid #000; display: block!important;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="row ">

<div class="col-md-8 ">
</div>

<div class="col-md-4">

      <div class="search">
        <p>search</p>
      </div>

      <div class="about">
        <p>about</p>
      </div>
</div>

</div>

在您的CSS div { display: block; }上，或者您可以为您的课程提供财产，例如：

.search { display: block;}
.about { display: block;}

如果你只想测试它是否有效你可以直接在html上编写它，但是只要看到它有效就把它改成CSS文件：

<div style="display: block;" class="search">
    <p>search</p>
  </div>

  <div style="display: block;" class="about">
    <p>about</p>
  </div>

Answer 4

.search {border: 1px solid #000; display: block!important;}
.about {border: 1px solid #000; display: block!important;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="row ">

<div class="col-md-8 ">
</div>

<div class="col-md-4  d-flex justify-content-start">

      <div class="search">
        <p>search</p>
      </div>

      <div class="about">
        <p>about</p>
      </div>
</div>

</div>

Answer 5

您可以尝试将此css样式添加到div元素：

div{
    clear:both;
}

Answer 6

它在我的浏览器中完美运行。 <div>标签默认是一个块元素。我认为你应该更新你的浏览器。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="row ">

<div class="col-md-8 ">
</div>

<div class="col-md-4">

      <div class="search">
        <p>search</p>
      </div>

      <div class="about">
        <p>about</p>
      </div>
</div>

</div>

Answer 7

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="row ">

<div class="col-md-8 ">
</div>

<div class="col-md-4 d-flex justify-content-start">

      <div class="search">
        <p>search</p>
      </div>

      <div class="about">
        <p>about</p>
      </div>
</div>

</div>

d-flex justify-content-start - 如果我添加此代码它不起作用