修复引导程序 5 中的 div 宽度答案

【问题标题】：Fix div width in bootstrap 5修复引导程序 5 中的 div 宽度
【发布时间】：2022-02-06 05:02:02
【问题描述】：

我在引导程序 5 的 div('request_info') 中有一个表单。我想覆盖 min-width(of the div) 但它不起作用。我的代码：

<div class="request_info">
    <form>
        <div class="form-group w-25 p-1 px-5">
          <label for="a"><strong>a</strong></label>
          <select class="form-control" id="exampleFormControlSelect1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
          </select>
        </div>
        <div class="form-group w-25 p-1 px-5">
            <label for="b"><strong>b</strong></label>
            <input type="date" class="form-control" name="b" required>
        </div>
        <div class="request_submit">
            <button type="submit" class="btn btn-danger text-center" name="submit">Make a Request</button>
        </div>
        </form>
</div>

在 CSS 中：


.request_info {
    min-width: 350px !important;
   }

【问题讨论】：

标签： html css padding

【解决方案1】：

根据https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity，最好不要在CSS 规则中使用!important。

!important 然而，这是不好的做法，应该避免，因为它通过打破自然级联使调试更加困难你的样式表。

为了解决这个问题，您需要提高特异性。

您可以通过多种方式做到这一点。

一个简单的方法是用例如覆盖350px 450px写信：

div.request_info {
    min-width: 450px !important;
   }

【讨论】：