Question

我正在使用bootstrap，我想把我的DIV向左（浅灰色）分成两部分：col-md-3，其中包含一个大的地图图钉图标，col-md-9它将包含地址（以及与下一个框重叠的小箭头）。

不幸的是，我所尝试的并没有返回预期的结果。地图引脚（来自字体awesome）不考虑增加的字体大小类，对于特定于地址的类也是如此。

问题是什么？

我想要实现的目标：

我得到了什么：

<div class="container offset-60px">
        <div class="row">
            <div class="col-md-4 intro-boxes white-smoke">
                <div class="col-md-3 green">
                    <i class="fa fa-map-marker map-pin"></i>
                </div>
                <div class="col-md-9">
                    <p class="top-address-name">Company name</p>
                    <p class="top-address-street">address line 1</p>
                    <p class="top-address-street">address line 2</p>
                    <p class="top-address-tel">Tel number</p>
                </div>
            </div>
            <div class="col-md-4 intro-boxes apple">
                <p>John Doe</p><span>Born in Japan</span>
            </div>
            <div class="col-md-4 intro-boxes chateau-green">
                <p>Jane Doe</p><span>Born in France</span>
            </div>
        </div>
    </div><!--- END container -->

CSS：

.map-pin {
font-size: 58px;

}


.top-address-name {
font-size: 18px;
color: #4A4A4A;
}

.top-address-street {
font-size: 18px;
color: #37A187;
}

.top-address-tel {
font-size: 14px;
color: #4A4A4A;
}

Answer 1

检查demo
1-如果你想添加嵌套网格，我的意思是.col-xx-x .col-xx-x你应该用.row类包装第二级。
2-从display: flex; div中移除.white-smoke以不影响网格 3- .intro-boxes属性覆盖了第一个有bug的div。所以你应该像.intro-boxes.apple p, .intro-boxes.chateau-green p

那样指定它们

CSS错误对齐和引导程序格式化问题

1 个答案: