Question

我希望每个图标与各自的标题一致但这就是它的样子：

CSS HTML ：

.section-service .bx h4 {
    text-transform: uppercase;
    color: #535355;
}

.section-service .bx span {
    font-size: 250%;
    float: left;
    width: 25%;
}
.section-service .bx h4,
.section-service .bx p {
   float: right;
    width: 75%;
}

<html>        
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/animatecss/3.5.1/animate.min.css">
    <link rel="stylesheet" type="text/css" href="resources/css/styles.css">
    <link rel="stylesheet" type="text/css" href="resources/css/responcive.css">
    <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
  </head>
</html>

<section id="service" class="section-service">
        <div class="container">
            <div class="row">
                <h2>our service</h2>
                <p class="long-copy">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
            </div>
            <div class="row  js--wp-2">
                <div class="col-sm-4 bx">
                    <span class="fa fa-desktop"></span>
                    <div>
                        <h4>web development</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknowns printer took a galley of type and scrambled
                        </p>
                        </div>
                </div>
                <div class="col-sm-4 bx">
                    <span class="fa fa-paw"></span>
                    <div>
                        <h4>digital desighn</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknowns printer took a galley of type and scrambled
                        </p>
                    </div>
                </div>
                <div class="col-sm-4 bx">
                    <span class="fa fa-magic"></span>
                    <div>
                        <h4>marketing</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknowns printer took a galley of type and scrambled
                    </p>
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="row">
                <div class="col-sm-4 bx">
                    <span class="fa fa-shopping-cart"></span>
                    <div>
                        <h4>e-commerce</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknowns printer took a galley of type and scrambled
                        </p>
                    </div>
                </div>
                <div class="col-sm-4 bx">
                    <span class="fa fa-mobile-phone"></span>
                    <div>
                        <h4>app development</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknowns printer took a galley of type and scrambled
                        </p>
                    </div>
                </div>
                <div class="col-sm-4 bx">
                    <span class="fa fa-rocket"></span>
                    <div>
                        <h4>s.e.o</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknowns printer took a galley of type and scrambled
                        </p>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </section>

我尝试在 响应中创建此部分，我会尝试修复 992px和768px媒体查询 。我无法在 ＆lt; = 568px 中修复它。

Answer 1

我认为您的h4元素有margin-top。

您应该在“col-xs-12”之前添加“col-sm-4”课程。
类似的东西：

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

也许只是删除这个margin-top就可以了？

.section-service .bx h4{
   margin-top:0px;
}

或添加到此现有选择器：

.section-service .bx h4 {
    text-transform: uppercase;
    color: #535355;
    margin-top:0px;  // <-- this line
}

也许你还得到了一个覆盖这个margin-top的其他css文件所以你只需要附加!important这样的内容：

margin-top:0px !important;

Snipet ：

.section-service .bx h4 {
    text-transform: uppercase;
    color: #535355;
    margin-top:0px;
}

.section-service .bx span {
    font-size: 250%;
    float: left;
    width: 25%;
}
.section-service .bx h4,
.section-service .bx p {
   float: right;
    width: 75%;
}

<html>        
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/animatecss/3.5.1/animate.min.css">
    <link rel="stylesheet" type="text/css" href="resources/css/styles.css">
    <link rel="stylesheet" type="text/css" href="resources/css/responcive.css">
    <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
  </head>
</html>

<section id="service" class="section-service">
        <div class="container">
            <div class="row">
                <h2>our service</h2>
                <p class="long-copy">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
            </div>
            <div class="row  js--wp-2">
                <div class="col-xs-12 col-sm-4 bx">
                    <span class="fa fa-desktop"></span>
                    <div>
                        <h4>web development</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknowns printer took a galley of type and scrambled
                        </p>
                        </div>
                </div>
                <div class="col-xs-12 col-sm-4 bx">
                    <span class="fa fa-paw"></span>
                    <div>
                        <h4>digital desighn</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknowns printer took a galley of type and scrambled
                        </p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-4 bx">
                    <span class="fa fa-magic"></span>
                    <div>
                        <h4>marketing</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknowns printer took a galley of type and scrambled
                    </p>
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="row">
                <div class="col-xs-12 col-sm-4 bx">
                    <span class="fa fa-shopping-cart"></span>
                    <div>
                        <h4>e-commerce</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknowns printer took a galley of type and scrambled
                        </p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-4 bx">
                    <span class="fa fa-mobile-phone"></span>
                    <div>
                        <h4>app development</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknowns printer took a galley of type and scrambled
                        </p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-4 bx">
                    <span class="fa fa-rocket"></span>
                    <div>
                        <h4>s.e.o</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknowns printer took a galley of type and scrambled
                        </p>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </section>

以下是 bootply 进行试验：http://www.bootply.com/D7jGgqj9LC，您可以点击手机图标在智能手机视图中进行测试。

Answer 2

请试试这个：

.section-service .bx h4, .section-service .bx p {
    float: right;
    width: 75%;
    margin-top: 0;
}

元素未在Bootstrap中对齐

2 个答案: