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

问题描述

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

How do I get auto width in Bootstrap 4 columns?

我需要连续2列而不固定宽度，这可能吗?

I need 2 column in a row without fixed width, is it possible?

推荐答案

使用col类.您也可以使用col-*例如:col-md

Use col class. You can use col-* also eg: col-md

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

如果使用col类，则列的宽度将相等.如果使用col-auto，则列的宽度将为列中内容的宽度.

If you use col class the columns will be of equal width.If you use col-auto the width of the column will be the width of the contents in the column.

您甚至可以将两者结合使用，如下所示.在这种情况下，第一列的宽度将等于该列的内容.第二列宽度取其余宽度.

You can even use a combination of both, like below. In this case the first column width will be equal to the contents of that column. Second column width take the rest of width.

    <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时.

When using col-auto for first column and col for second.

<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>

这篇关于如何在Bootstrap 4中获得自动宽度列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！