Bootstrap4和Angular：文本右无法在列上使用

Question

我必须承认我是Bootstrap 4的新手，因为在我的旧项目中仅使用了3.3版本，而不使用flexblox网格系统。

现在开始一个新项目，我陷入了这个问题：

我只是无法使用本机引导程序类.text-right给col-12元素提供“文本对齐”的CSS样式

我尝试在html标记上手动设置style =“'text-align：right！important'”并成功！

我什至试图用p代替直接在html div-col标签中编写文本，但这是一个块元素。

代码如下：

<app-footer>
        <div class="container">
            <div class="row">
                <div class="col-12 text-right">
                    I - Team - Pc System 2019 ©
                </div>
            </div>
        </div>
 </app-footer>

我只是希望在col的右侧看到页脚文本，但 结果是：

控制台分析该html元素：

您对问题有任何想法吗？ 我只是不想在html元素上应用样式，而是将其设为本机 引导程序类正常工作！

谢谢。

编辑： 就像您在评论中说的那样，也许这是我项目中有关引导程序配置的问题。

在package.json中，我具有引导程序：“ ^ 4.2.1” 作为依赖项。

然后在angular.json中，我们有了这个：

             "styles": [
                        "node_modules/bootstrap/dist/css/bootstrap-reboot.css",
                        "node_modules/bootstrap/dist/css/bootstrap-grid.css",
                        [...]
                        "src/dx-styles.scss",
                        "src/styles.scss"
                    ],

该项目来自模板角度项目，现在可能配置正确。

预先感谢

Answer 1

您的引导程序包含的内容似乎有问题。一个简单的代码摆弄，同时包含boostrap js和CSS作品。

https://jsfiddle.net/qdfy91r5/

    <div class="container">
        <div class="row">
            <div class="col-12 text-right">
                I - Team - Pc System 2019 ©
            </div>
        </div>
    </div>

Answer 2

你可以使用

div class="container">
            <div class="row">
                <div class="col-12 col push 5">
                    I - Team - Pc System 2019 ©
                </div>
            </div>
        </div>

Answer 3

你可以使用类似的东西

.content{
     display: flex;
     justify-content:end;
 }

div class="container">
        <div class="row">
            <div class="col-12 col content">
               <p> I - Team - Pc System 2019 ©</p>
            </div>
        </div>
    </div>

或者你可以使用这样的东西

    div class="container">
        <div class="row">
            <div class="col-12 col d-flex flex-end">
               <p> I - Team - Pc System 2019 ©</p>
            </div>
        </div>
    </div>