Bootstrap4 和 Angular：text-right 不适用于列答案

【问题标题】：Bootstrap4 and Angular: text-right not working on columnBootstrap4 和 Angular：text-right 不适用于列
【发布时间】：2019-06-04 09:48:58
【问题描述】：

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

现在开始一个新项目，我被这个问题困住了：

我只是不能用原生引导类 .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 元素上应用样式，而是制作原生引导类正常工作！

提前致谢。

编辑： 就像你在cmets中说的，可能这是我项目中bootstrap配置的问题。

在 package.json 我有 bootstrap: "^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"
                    ],

此项目来自模板 Angular 项目，可能现在配置正确。

提前致谢

【问题讨论】：

你在angular-cli.json 中添加bootstrap.css 吗？\
你能把你的项目添加到stackblitz stackblitz.com/edit/angular-jgwtme
你试过 margin-left: auto; ?
谢谢大家，我将在他的回答下回答 erikrunia。我的项目使用 angular7，我没有 angular-cli.json 而是 angular.json @Hameed Syed：它有效，但我只想用原生引导程序 4 类解决这个问题

标签： html angular flexbox bootstrap-4

【解决方案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>

【讨论】：

嗨，erikrunia。可能你是对的。我将编辑原始帖子以向您展示所需的一切。非常感谢。

【解决方案2】：

你可以使用

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

【讨论】：

【解决方案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>

【讨论】：