在一行中引导 5 列答案

【问题标题】：bootstrap 5 columns in one row在一行中引导 5 列
【发布时间】：2020-03-02 19:56:47
【问题描述】：

我已经查看了这些链接，但仍未发现问题我试图在下面连续获得 5 列

css

.col-xs-offset-13{
    margin-left:4.166666667%;
}

html

<div class="col-xs-2">1</div>
<div class="col-xs-2 col-xs-offset-13">2</div>
<div class="col-xs-2 col-xs-offset-13">3</div>
<div class="col-xs-2 col-xs-offset-13">4</div>
<div class="col-xs-2 col-xs-offset-13">5</div>

但我得到的结果是连续 6 列。任何想法将不胜感激

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用没有列大小的col-xx 类：

div div div {
  border: solid;
  margin: 2px;/* this can be added without breaking the row */
}
div div div:before {
content:attr(class);/* show class used */
color:crimson

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<p>Class used , play snippet in full page to test behavior on resizing :</p>
<div class="container">
  <div class="row">
    <div class="col-sm"></div>
    <div class="col-sm"></div>
    <div class="col-sm"></div>
    <div class="col-sm"></div>
    <div class="col-sm"></div>
  </div>
  <div class="row">
    <div class="col-md"></div>
    <div class="col-md"></div>
    <div class="col-md"></div>
    <div class="col-md"></div>
    <div class="col-md"></div>
  </div>
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
</div>

【讨论】：