bootstrap grid col-md-4对齐不起作用

问题描述

我在Chrome上显示页面时遇到以下问题，想知道您是否也遇到过该问题。您是否遇到过以下不一致之处，以及如何缓解它们？

在Chrome中，我的Nebular HTML标签（TabB）之一没有对齐。

尽管在TabA中，使用相同的代码，元素仍然是对齐的。

在Firefox中，TabB是完全不同的布局。

我还注意到，每当我将TabB引导程序代码从col-md-4更改为col-md-9时，其对齐方式在Firefox中都会更改，但在Chrome中不会更改。我尝试清除Chrome缓存并重新启动，但还是没有运气

这是我的代码。预先感谢！

<nb-card>
<nb-card-header>
        <input nbInput id="search" class="search-input" placeholder="Search" #Box (keyup)="onKey(Box.value)">
</nb-card-header>
   
<nb-card-body>
    <nb-tabset fullWidth>
        <nb-tab tabTitle="TabA">
            <div class="row">
                <div class="col-md-4" *ngFor="let item of list_of_detail">
                    <nb-card status="success" *ngIf="item.env == 'A'">
                        <nb-card-header> {{ item.host }}</nb-card-header>
                        <nb-card-body>
                            version: {{ item.version }}
                        </nb-card-body>
                        <nb-card-footer>{{ item.service }} | {{ item.region }}</nb-card-footer>
                    </nb-card>
                </div>
            </div>
        </nb-tab>

        <nb-tab tabTitle="TabB">
            <div class="row">
                <div class="col-md-4" *ngFor="let item of list_of_detail">
                    <nb-card status="danger" *ngIf="item.env == 'B'">
                        <nb-card-header> {{ item.host }}</nb-card-header>
                        <nb-card-body>
                            version: {{ item.version }}
                        </nb-card-body>
                        <nb-card-footer>{{ item.service }} | {{ item.region }}</nb-card-footer>
                    </nb-card>
                </div>
            </div>
        </nb-tab>

....

解决方法

我希望您知道col-sm仅对小型设备有效，而不在计算机屏幕上有效。|

在Bootstrap 4上，您可以将“ xs-”指示符放到最低断点：

<div class="row">
<div class="col-2 col-sm-3">Something here</div>
<div class="col-10 col-sm-9">Something else here</div>
</div>

“移动优先”思想的一部分。

使用。

.col-特小（此代码用于特小屏幕，例如：小型android设备）

.col-sm-小（此代码用于小巧的小屏幕，例如：最新的智能手机）

.col-md-中号（此代码用于中型Deive屏幕）

.col-lg-大（此代码用于大尺寸的Deive屏幕，例如：计算机屏幕）

.col-xl-特大型（此代码用于特大型屏幕，例如android电视或其他较大的大屏幕）

Bootstrap col是指如何在不同大小的屏幕上显示内容|您可以使用class="col-sm-12 col-md-6 col-lg-4 col-2"设置多个类别。现在，这将在不同的设计中以不同的方式显示。...

如果不能很好地创建它，我建议您从bootstrap自己的网站下载Bootstrap主题|或者，如果您想学习Bootstrap，我建议您使用w3schools.com/bootstrap4

请确认您的代码是这样的现在更新代码-您现在就可以查看差异

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <!--bootstrap 4.0----> <!---this is importent--->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<style>
.border{
    border: 1px solid gray;
}
</style>
<body>



    <nb-card>
        <nb-card-header>
                <input nbInput id="search" class="search-input ml-3 mt-2 mb-2" placeholder="Search" #box (keyup)="onKey(box.value)">
        </nb-card-header>
           
        <nb-card-body>
           
            <nb-tabset fullWidth>
                <nb-tab tabTitle="TabA"> 
                    <div class="row">
                        <div class="col-md-2 col-sm-12 p-2 m-5 border" *ngFor="let item of list_of_detail">
                            <nb-card status="success" *ngIf="item.env == 'A'"> 
                                <nb-card-header> {{ item.host }}</nb-card-header>
                                <nb-card-body>
                                    version: {{ item.version }}
                                </nb-card-body>
                                <nb-card-footer>{{ item.service }} | {{ item.region }}</nb-card-footer>
                            </nb-card>
                        </div>
                    </div>
                </nb-tab>
        
                <nb-tab tabTitle="TabB"> 
                    <div class="row">
                        <div class="col-md-4 col-sm-12 p-2 m-5 border" *ngFor="let item of list_of_detail">
                            <nb-card status="danger" *ngIf="item.env == 'B'">
                                <nb-card-header> {{ item.host }}</nb-card-header>
                                <nb-card-body>
                                    version: {{ item.version }}
                                </nb-card-body>
                                <nb-card-footer>{{ item.service }} | {{ item.region }}</nb-card-footer>
                            </nb-card>
                        </div>
                    </div>
                </nb-tab>







    <!-----Bootstrap--> <!---this is importent--->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!---this is importent--->
    
</body>
</html>

您必须添加CSS文件

 <!---bootstrap 4.0----> <!---this is importent--->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

脚本是

<!-----Bootstrap--> <!---this is importent--->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <!---this is importent--->

您将得到类似的答案

View image In Full Screen

firefox google-chrome html nebular