移动响应部分

Question

我对我正在创建的网站存在一些问题。我需要浮动的另一种选择：左;对于这些图标。下面我将上传移动屏幕和电脑屏幕的两个屏幕截图。

Computer Size

Mobile Size

这是我的代码：

.featureIcon {
    width: 70px;
    float: left;
}

.featureRowSplit {
    padding-bottom: 30px;
    padding-top: 20px;
}

.featureText {
    font-family: 'Lato', sans-serif;
    color: #146eff;
    margin-left: 80px;
}

<div class="row">
            <div class="col-md-8">
                <div class="row featureRowSplit">
                    <div class="col-md-4">
                        <img src="img/FeatureIcons/1.png" class="featureIcon">
                        <h3 class="featureText">Cheap</h3>
                    </div>
                    <div class="col-md-4">
                        <img src="img/FeatureIcons/2.png" class="featureIcon">
                        <h3 class="featureText">Friendly</h3>
                    </div>
                    <div class="col-md-4">
                        <img src="img/FeatureIcons/3.png" class="featureIcon">
                        <h3 class="featureText">Clean Code</h3>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <img src="img/FeatureIcons/4.png" class="featureIcon">
                        <h3 class="featureText">Quick</h3>
                    </div>
                    <div class="col-md-4">
                        <img src="img/FeatureIcons/5.png" class="featureIcon">
                        <h3 class="featureText">Helpful</h3>
                    </div>
                    <div class="col-md-4">
                        <img src="img/FeatureIcons/6.png" class="featureIcon">
                        <h3 class="featureText">Reliable</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                
            </div>
        </div>

最诚挚的问候， Ben J

Answer 1

是否希望它们在一列中对齐？如果是这样，您可以将整个事物设置在无序列表中，并将图像和标题放在那里。对于css，将list-style-type：none;作为无序列表，并将display：block;和float：left;放在一起。对于实际的li元素。