小编Kam*_*ron的帖子

Bootstrap 等列高尺寸

我想使第一行之后的列即使具有动态内容（转到整页），也使 col-md-6 的高度相等。

<html>

<head>
  <title>Page Title</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!--JS-->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>

<body>
  <div class="col-xs-3">
    <div class="row">
      <div class="col-md-6">
        <div class="shadow p-3 mb-5 bg-white rounded">
          <div class="container">
            <div class="row">
              <div class="col-md-6">
                -Icon-
              </div>
              <div class="col-md-6">
                <p>Date</p>
              </div>
            </div>

          </div>
          <p>Author</p>
          <div class="row">
            <div class="col-md-6">
              <p>Time</p>
            </div>

            <div class="col-md-6">
              <div>

              </div>
            </div>
            <!-- This needs to get the latest unread message -->
            <!-- {% if …

Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap bootstrap-5

Aru*_*han

2022 06-23

9
推荐指数

1
解决办法

1万
查看次数

Tailwind的config中，添加属性到主题VS theme.extend有什么区别？

Tailwind 的配置文档对该extend属性进行了多种使用，但没有阐明对theme属性进行自定义与对theme.extend属性进行自定义的区别。

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
    }
  },
}

Run Code Online (Sandbox Code Playgroud)

这里有什么区别呢？我已经测试过，可以切换颜色和间距属性，并且它们仍然有效。

javascript css tailwind-css

sga*_*dev

2022 01-21

5
推荐指数

1
解决办法

2372
查看次数

当设备宽度缩小时如何将弯曲方向从行转向列（HTML）

我正在寻找方法将笔记本电脑屏幕上排成一排的三张卡片转换为移动屏幕上的列视图。不幸的是，我不太知道如何执行此操作。

当在笔记本电脑屏幕上时，三张卡片看起来很正常当在手机屏幕上时，三张卡片超出了一般网站边框的宽度。

html css flexbox

Rim*_*oni

2022 03-09

4
推荐指数

1
解决办法

6379
查看次数

HTML 标题 (<h1> - <h6>) 在任何浏览器中都有默认的内边距或边距吗？

有人问我的朋友如何删除标题标签周围的空格，他回答说

h1 {
  margin: 0;
  padding: 0;
}

Run Code Online (Sandbox Code Playgroud)

但我从未真正见过标题周围的填充。在我得到的每个浏览器中，只有保证金。所以现在我想知道，实际上是否有浏览器默认在标题周围有填充？

或者这是所有浏览器都遵循的标准，即不在标题周围添加填充？是padding: 0;不必要的吗？

html css

Fir*_*o99

2022 09-30

3
推荐指数

1
解决办法

4426
查看次数

让 flex 子容器采用其内容的宽度，而不是父容器的宽度

我正在使用 flex 进行样式设置，并且对子元素的宽度有疑问。在我的 JS Fiddle 示例中，如果您查看“灵活取消”药丸徽章......右侧有很多空白区域。如何更新 Flex 样式，以使药丸徽章的宽度没有多余的空白？看起来这个子元素的宽度正在扩展到其父元素的整个宽度......

JS 小提琴：https://jsfiddle.net/a76bdLvp/1/

代码重点领域（来自 JS Fiddle）：

.left-column {
   padding: 12px 12px 12px 16px;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
   -webkit-box-flex: 1;
   flex: 1 1 0px;
}

.pill-badge {
   margin-bottom: 4px;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
}

Run Code Online (Sandbox Code Playgroud)

当前结果

期望的结果

我回顾了这个例子，它看起来非常相似......但是应用这个解决方案（或 inline-flex 到子级）不起作用。我非常感谢你的帮助！

使弹性项目采用内容宽度，而不是父容器的宽度

html css styles flexbox

Mic*_*ael

2022 02-05

2
推荐指数

1
解决办法

8035
查看次数

表情符号导致行高发生变化

<p>Alternatively, you can use percentages, which
   will be calculated with respect to the width of the generated box's
   containing block. &#128517;Therefore, assuming the container's width
   is greater than the image's height, margin: -50% 0 should be enough.
   Hide code snippet
</p>

Run Code Online (Sandbox Code Playgroud)

如何避免插入表情符号时行高发生变化？

html css emoji

Abd*_*Abd

2021 11-20

1
推荐指数

1
解决办法

1006
查看次数

带引导程序的固定表头

我遇到了冲突，因为只有当我使用表响应类的 div 时，我的标头才被修复，但我需要它来使表溢出。有人能帮我吗？

使用表响应类

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <style>

    </style>
</head>

<body>
    <div class="table-responsive">
        <table class="table table-striped w-auto">
            <thead class="bg-light sticky-top">
                <tr>
                    <th>header</th>
                    <th>header</th>
                    <th>header</th>
                    <th>header</th>
                    <th>header</th>
                    <th>header</th>
                    <th>header</th>
                    <th>header</th>
                    <th>header</th>
                    <th>header</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                </tr>
                <tr>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                </tr>
                <tr> …

Run Code Online (Sandbox Code Playgroud)

html css sticky twitter-bootstrap bootstrap-5

Bry*_*tos

2022 04-14

1
推荐指数

1
解决办法

1万
查看次数