Bootstrap：强制col-auto不要太贪心

Question

如果我们看一下下面这个简约的例子，我用 class col-auto 布局两列。即：取你需要的space。

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
  overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">


<div class="container-fluid w-100">
  <div class="row flex-nowrap">
    <div class="col-auto">
      "Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum."
    </div>
    <div class="col-auto">
      2 of 2
    </div>
  </div> 
</div>

输出：

现在的问题是第一列占用了太多 space 以至于它覆盖了第二列甚至视口。有没有一种巧妙的方法来确保每一列虽然能够使用可用的 space，但不会太贪心并且仍然为其他列留下 space？然后它应该只为自己的内容显示一个滚动条，第二列应该只是文本“2 of 2”的一个非常小的列。

请注意，我故意希望它们相邻而不是换行。

Answer 1

在您的第一列中：

添加classtext-break
将 col-auto 替换为 col

Bootstrap text-break Doc

bootstrapcol和col-auto的区别：

.col{
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}
.col-auto{
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

演示：

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
  overflow: auto;
}

.col > img{
  max-width:100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<h1> With or Without text-break</h1>
<h2> Flexbox with text-break </h2>

<div class="container-fluid w-100">
  <div class="row flex-nowrap">
    <div class="col text-break">
      "Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum."
    </div>
    <div class="col-auto">
      2 of 2
    </div>
  </div> 
</div>


<h2> Flexbox without text-break </h2>
<div class="container-fluid w-100">
  <div class="row flex-nowrap">
    <div class="col">
      "Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum."
    </div>
    <div class="col-auto">
      2 of 2
    </div>
  </div> 
</div>

<h2>With image</h2>

<div class="container-fluid w-100">
  <div class="row flex-nowrap">
    <div class="col">
    <img src="https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_1200x675_crop_center-center_82_line/image_optimzation.jpg.webp">
<!--       "Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum." -->
    </div>
    <div class="col-auto">
      2 of 2
    </div>
  </div> 
</div>

Answer 2

不确定这是否是完美的解决方案，但您可以尝试 row-cols class。这使您可以在其父行中使用 class 定义列。您可以在下面的行中添加任意多的列，但是 row-cols-2 会生成一个 auto-width 以确保只有 2 列 side-by-side 并且接下来的 2 列堆叠在下方。无需自定义 CSS。

 <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>

Bootstrap：强制col-auto不要太贪心

Bootstrap: force col-auto not to be too greedy

css

bootstrap-grid

bootstrap-5