无法设置引导卡体的宽度答案

【问题标题】：Cannot set width of bootstrap card-body无法设置引导卡体的宽度
【发布时间】：2022-01-14 15:48:53
【问题描述】：

我尝试了一切，从文档到最后 10 个堆栈溢出答案，但没有任何帮助。我试过了：

<meta name="viewport" content="width=device-width, initial-scale=1">

我尝试了@@meedia 的风格，我尝试了卡体上的 w-100，一切都没有帮助。我需要像这样的整个应用程序具有正常宽度，所以请帮忙。我有带有 .NET 6 的 VS 2022。

当我启动一个应用程序（在桌面上）并继续 F12 时，我无法制作移动设备。卡体很长，我想将卡体的宽度设置为手机屏幕尺寸。

代码是这样的：

<div class="row">
<div class="col-sm-4">
    <div class="card bg-light w-100 p-0">
        <div class="card-body">
            <a class="nav-link text-dark" asp-area="" asp-controller="Oglas" asp-action="ProdajaKuce">Prodaja kuća</a>
        </div>
    </div>
</div>
<div class="col-sm-4">
    <div class="card bg-light w-100 p-0">
        <div class="card-body">
            <a class="nav-link text-dark" asp-area="" asp-controller="Oglas" asp-action="ProdajaStanova">Prodaja stanova</a>
        </div>
    </div>
</div>
<div class="col-sm-4">
    <div class="card bg-light w-100 p-0">
        <div class="card-body">
            <a class="nav-link text-dark" asp-area="" asp-controller="Oglas" asp-action="ProdajaNekretninaZaOdmor">Prodaja nekretnina za odmor</a>
        </div>
    </div>
</div>

最后的结果还是一样。

【问题讨论】：

标签： html css asp.net asp.net-mvc bootstrap-4

【解决方案1】：

w-100 只是将width 设置为父容器的100%，在这种情况下由col-sm-4 指定。 Bootstrap 使用 12 列，并根据 col- 类将内容划分为多个。如果您希望每列占据一整行，则只需使用col-12。

如果您希望它们在移动设备上占据整个宽度，但在桌面上占据三列，您可以使用col-sm-12 和col-md-4 的组合，如下例所示：

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

<div class="row">
  <div class="col-md-4 col-sm-12">
    <div class="card bg-light w-100 p-0">
      <div class="card-body">
        <a class="nav-link text-dark" asp-area="" asp-controller="Oglas" asp-action="ProdajaKuce">Prodaja kuća</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-sm-12">
    <div class="card bg-light w-100 p-0">
      <div class="card-body">
        <a class="nav-link text-dark" asp-area="" asp-controller="Oglas" asp-action="ProdajaStanova">Prodaja stanova</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-sm-12">
    <div class="card bg-light w-100 p-0">
      <div class="card-body">
        <a class="nav-link text-dark" asp-area="" asp-controller="Oglas" asp-action="ProdajaNekretninaZaOdmor">Prodaja nekretnina za odmor</a>
      </div>
    </div>
    </div

【讨论】：

这没有帮助。我又给你截图了。