如何在Bootstrap 4中实现自动宽度列？

Question

如何在Bootstrap 4列中获得自动宽度？

我需要在一行中有2个没有固定宽度的列，这可能吗？

- Delowar Hosain

---

阅读文档？https://getbootstrap.com/docs/4.0/layout/grid/#auto-layout-columns - Carol Skelly

Answer 1

使用col类。您也可以使用col-*，例如：col-md

 <div class="row">
        <div class="col">Col1</div>
        <div class="col">Col2</div>
    </div>

如果您使用col类，则列的宽度将相等。如果您使用col-auto，则列的宽度将是该列内容的宽度。您甚至可以同时使用两者，例如下面的示例。在此情况下，第一列的宽度将等于该列的内容，第二列的宽度将占据其余的宽度。

    <div class="row">
        <div class="col-auto">Col1</div>
        <div class="col">Col2</div>
    </div>

一些例子

当使用2个col类时

<div class="container">
  <div class="row">
    <div class="col">
      col - equal columns
    </div>
    <div class="col">
       col - equal columns
    </div>    
  </div>
</div>

当第一列使用col-auto而第二列使用col时。

<div class="container">
  <div class="row">
    <div class="col-auto">
      col-auto - hello
    </div>
    <div class="col">
       col - this column takes rest of available space
    </div>    
  </div>
</div>

在这里玩游戏

/* CSS used here will be applied after bootstrap.css */

.container {
  width: 600px;
}

.row {
  padding: 10px;
}

.col,
.col-auto {
  border: 1px solid #CCC;
  padding: 5px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-auto">
      col-auto - hello
    </div>
    <div class="col">
      col - this column takes rest of available space
    </div>
  </div>
</div>

- kiranvj

---

有没有类似于整张表格的东西？我正在尝试使用Bootstrap布局一个表格，并希望表格的列宽适应列中最长的单元格。 - Qw3ry

@Qw3ry 我没有完全理解！！我建议您将其作为一个新问题提出，这样您将获得更多的输入。 - kiranvj

实际上我想要的是像这样的东西，我没有意识到我可以在col里面再放一个row... 但是为了辩护自己，我对Web编程还是很新的，特别是涉及到像Bootstrap这样的框架^^ - Qw3ry

Answer 2

使用col-auto。它会根据内容大小自动采用列尺寸。它将在所有设备上根据内容调整宽度。

- Yuvraj Patil