我不希望 div 并排出现答案

【问题标题】：I do not want divs to come side by side我不希望 div 并排出现
【发布时间】：2018-01-03 14:32:21
【问题描述】：

我不希望 div 并排出现。我该如何解决这个问题

搜索一下 --> 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>

【问题讨论】：

向我们展示您的 .about 和 .search 的 CSS。
我还没有css代码
正如预期的那样，它们确实在彼此下方。查看您自己的 sn-p。
好的，我已编辑。谢谢。

标签： html css twitter-bootstrap

【解决方案1】：

您是否尝试过在 div 之间添加<br/> 标签？

【讨论】：

我不想使用 br 标签

【解决方案2】：

从 div 中删除 class="col-md-4"

【讨论】：

为什么？我正在使用引导程序

【解决方案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>

【讨论】：

CSS 是什么样子的？
如果我添加此代码它不起作用 - col-md-4 d-flex justify-content-start
试试上面的sn-p，也许如果你添加“！important”就可以了
你在尝试使用 bootstrap 4 吗？

【解决方案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>

【讨论】：

为什么要在此处添加!important？ .search 和 .important 是普通的 divs，默认情况下是块元素。根本不需要添加这些规则。
我们应该怎么做？
删除d-flex justify-content-start。请注意，您在此处显示的代码与您的问题中的代码不同。

【解决方案5】：

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

div{
    clear:both;
}

【讨论】：

【解决方案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>

【讨论】：

【解决方案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 -- 如果我添加此代码，它不起作用

【讨论】：

伙计，那就不要添加它，因为这就是你的问题的原因！