如何在 Bootstrap 4 中获得自动宽度列? [英] How do I get auto-width-columns in Bootstrap 4?

查看：26
本文介绍了如何在 Bootstrap 4 中获得自动宽度列?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

解决方案

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

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

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

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

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

一些例子

当使用 2 个 col 类时

<div class="row"><div class="col">col - 相等的列
<div class="col">col - 相等的列

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

<div class="row"><div class="col-auto">col-auto - 你好
<div class="col">col - 此列占用剩余的可用空间

在这里玩

/* 这里使用的 CSS 将在 bootstrap.css 之后应用 */.容器 {宽度:600px；}.排 {填充:10px；}.col,.col-auto {边框:1px 实心 #CCC；填充:5px；}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="样式表"/><div class="容器"><div class="row"><div class="col-auto">col-auto - 你好

<div class="col">col - 此列占用剩余的可用空间

How do I get auto width in Bootstrap 4 columns?

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

解决方案

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>

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>

Some examples

When using 2 col classes

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

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>

Play here

/* 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 中获得自动宽度列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆