Question

我正在我的HTML中做一些Bootstrap网格，但它工作不正常，我在angular2中做，我是新手，但我不认为因为它，Bootstrap自然属性被中断

我的代码如下：

<div class="container  index-container">
    <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-12 ">
            <div class="col-md-4 col-sm-4 col-xs-4">
                <div class="dashboard-icon ">
                    <img src="./assets/img/icon/Merchant_onboarding_03.png" alt="MerchantBoarding" />
                </div>
            </div>
            <div class="col-md-8 col-sm-8 col-xs-8">
                <div class="dvIndexInnerHeader">
                    Merchant Boarding
                </div>
                <p>
                    Some Text
                </p>
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12 " >
            <div class="col-md-4 col-sm-4 col-xs-4">
                <div class="dashboard-icon">
                    <img src="./assets/img/icon/Agwnt_Management.png" alt="AgentManagement" />
                </div>
            </div>
            <div class="col-md-8 col-sm-8 col-xs-8">
                <div class="dvIndexInnerHeader">
                    Merchant Boarding
                </div>
                <p>
                    Some Text
                </p>
            </div>
        </div>
</div>

但它即将到来：

外柱工作正常，但内部折叠。圆形div和文本1已折叠。

Answer 1

不知道你想要获得什么，但为什么有这些嵌套的列定义？

<div class="col-md-4 col-sm-6 col-xs-12 ">
    <div class="col-md-4 col-sm-4 col-xs-4">

你应该简化那些行/列，你不能直接嵌套（例如，列应该是行的唯一直接子节点）。也许这就是你要找的东西：

<div class="col-md-4 col-sm-6 col-xs-12 ">
    <div class="row">
        <div class="col-md-4 col-sm-4 col-xs-4">

Answer 2

不直接在其他Bootstrap列中嵌套Bootstrap列。

相反，请始终使用.row + .col组合进行嵌套。

Bootstrap列必须有.row作为父级。

Bootstrap网格在angular2中表现不正常

2 个答案: