Question

由于Bootstrap，我试图使我的应用程序更加美观

我目前正在尝试将Bootstrap中的“ card”居中

我找到了一种使用mx-auto的方法

我使用mx-auto的代码仅在JSFiddle中起作用

<div class="card text-white bg-info mx-auto" style="max-width: 18rem;">
    <div class="card-header">Header</div>
        <div class="card-body">
            <h5 class="card-title">Info card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the     card's content.</p>
        </div>
    </div>
</div>

但是在我的应用程序中，卡未居中，有人知道为什么会发生这种情况吗？

我嵌入到Angular项目中的引导程序版本是4.1.2

这是我将Bootstrap嵌入到我的角度项目中的方法：

我用过

npm install bootstrap --save
npm install jquery --save
npm安装popper.js-保存

然后我将其添加到我的angular.json “ ./node_modules/bootstrap/dist/css/bootstrap.css”更改为样式

还有

“ ./ node_modules / bootstrap / dist / css / bootstrap.css”更改为样式
“ ./ node_modules / jquery / dist / jquery.min.js”
“ ./ node_modules / popper.js / dist / umd / popper.min.js”
“ ./ node_modules / bootstrap / dist / js / bootstrap.min.js”

Answer 1

您是否尝试过将行和列用于类justify-content-center：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="row justify-content-center">
    <div class="col-lg-4 col-md-4 col-sm-4">
      <div class="card text-white bg-info">
        <div class="card-header">Header</div>
        <div class="card-body">
          <h5 class="card-title">Info card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the     card's content.</p>
        </div>
      </div>
    </div>
</div>

Answer 2

也许您忘记了包含必需文件之一。你有所有这些吗？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

Answer 3

在引导程序4中，您具有内置的CSS“文本中心”，因此可以在任何div类上使用它来使内容居中

public string MyTextProperty { get; set; }

this.BindingContext = this;

无法将div Bootstrap4 / Angular居中

3 个答案: