如何减小bootstrap中div的大小？

Question

我使用bootstrap grid来设置div的大小，但我希望div的宽度要小一点。以下是我的代码

​

.single-box {
  background: black
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="col-md-3 ml-5">
  <div class="single-box">
    <p class="ml-5">1 марта, 18:00</p>
    <h4 class="ml-5">Hi</h4>
    <p class="ml-5">My name is..</p>
    <button type="button" class="btn mx-auto btn-light gotham">Write to me</button>
  </div>
</div>

​

有没有办法通过bootstrap工具减小宽度？或者唯一的出路就是忘记bootstrap grid，自己设置参数？

Answer 1

您可以像这样设置边距：

​

.single-box {
  background: green;
  margin: 0 50px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="col-md-3 ml-5">
  <div class="single-box">
    <p class="ml-5">1 марта, 18:00</p>
    <h4 class="ml-5">Hi</h4>
    <p class="ml-5">My name is..</p>
    <button type="button" class="btn mx-auto btn-light gotham">Write to me</button>
  </div>
</div>

​

Answer 2

可以使用Bootstrap实用程序类

w-25 for 25% width
w-50 for 50% width
w-75 for 75% width
w-100 for 100% width

如果您希望div宽度减少25%，您可以使用它，如下所示：

<div class="w-75">
    <h1>Hello World</h1>
</div>
<!-- Next div 100% or even you don't need to add w-100 class -->
<div class="w-100">
    <h1>Hello World</h1>
</div>