Question

我的页面上有一个卡片布局，我想减小自举式卡片布局的卡片标题宽度。

我尝试将margin属性用于，但它会减少整个div，但不会减少整个div，它会更改卡片标题div内的值。

<div class="card card-nav-tabs text-center grid-selection">
          <div class="card-body custom-card-body">
            <h5 class="card-text">ARCADE</h5>
          </div>
          <div class="card-footer text-muted custom-game-subtitle" id="arcade">

            <div class="custom-subtitle-text">
              Learn the Synonyms while you play.
            </div>
            <div class="custom-loading-svg" style="display:none">
              <img src="img/loading.svg">
            </div>

          </div>
          <!-- </a> -->
        </div>
    </div>

如何减少卡头的整个div？

JSFiddle

Answer 1

您必须更改HTML结构。查看更新的小提琴https://jsfiddle.net/aq9Laaew/118712/

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
     <div class="custom-card-body" style="width: 30%; background: red; margin: auto">
            <h5 class="card-text">ARCADE</h5>
     </div>

      <div class="card card-body card-nav-tabs text-center grid-selection">
          <div class="card-footer text-muted custom-game-subtitle" id="arcade">

            <div class="custom-subtitle-text">
              Learn the Synonyms while you play.
            </div>
            <div class="custom-loading-svg" style="display:none">
              <img src="img/loading.svg">
            </div>

          </div>
          <!-- </a> -->
        </div>
    </div>

  </div>
</div>

Answer 2

您可以将自己的样式规则添加到Bootstrap元素中，只需确保先放入Bootstrap样式，然后将您自己的自定义样式放在HTML的标题中即可。

您还可以使用此：

<div class="card" style="width: 18rem;">

Answer 3

这是一个可能有用的示例。

    if (Name.equals("Ammad") && password.equals("Ammad"))
        {
                displaymessage.setText("Login is successfull");
        }
        else
        {
            displaymessage.setText("Login is unsuccessful");
        }

减少Bootstrap中卡头的宽度

3 个答案: