在页面上以全宽显示 div 时出现问题

Question

我正在尝试在页面上并排显示 div。但是，如果页面上只有一个 col-md-6 div 类，那么我会尝试将其显示为全宽（100%）而不是 50%。目前，即使只有一个 col-md-6，它也只使用了 50%。有没有办法使用 CSS 来做到这一点？ 这是我的 HTML 和 CSS：

   <div class="col-md-6 textcontent">
   </div>

   <div class="col-md-6 service">
   </div>

   <div class="col-md-6 textcontent">
   </div>

CSS

.col-md-6{
width50%;
}

Answer 1

Flexbox 就是解决这个问题的方法。这是一个例子：

.wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-bottom: 2rem;
}

.item {
  flex-grow: 1;
  /* For display purposes */
  padding: 1rem;
}

.pink {
  background-color: pink;
}

.blue {
  background-color: lightblue;
}

.green {
  background-color: lightgreen;
}

.orange {
  background-color: coral;
}

<section class="wrap">
  <div class="item pink">
    Content 1
  </div>
  <div class="item blue">
    Content 2
  </div>
  <div class="item green">
    Content 3
  </div>
</section>

<section class="wrap">
  <div class="item orange">
    Content Solo
  </div>
</section>

https://jsfiddle.net/willihyde/aqrs410u/1/

Answer 2

如果您使用引导程序，则可以使用 col-md-12 类添加全宽列。 bootstrap 网格系统将作为分数系统出现，您的数字将除以 12。因此，如果我们将 6 除以 12，答案是 0.5，这意味着 50%。这就是为什么要添加 50% 宽度的列。因此，当我们加上 12 时，它将除以 12/12，宽度将为 100%。您可以按照 Bootstrap 网格系统指南了解有关各种宽度比例和如何制作响应式网格。

<div class="col-md-12 service"></div>

如果您尝试自己构建它，请使用名称定义另一个类并添加宽度：100%;

.col-md-12{
   width:100%;
}

然后将该类名添加到您的 html 类属性中

<div class="col-md-12 service"></div>