Bootstrap 中的元素未对齐

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 媒体查询。我无法在 <=568px.

中修复它

Answer 1

请试试这个：

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

Answer 2

我认为你的 h4 元素有 margin-top.

您应该在“col-sm-4”之前添加“col-xs-12”class。
像 :

<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
}

也许您还有其他 css 文件覆盖了这个边距顶部。
所以你只需要像这样附加一个 !important :

margin-top:0px !important;

片段 :

.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 to experiment : http://www.bootply.com/D7jGgqj9LC，可以点击phone图标在smartphone视图中测试

Bootstrap 中的元素未对齐

Elements not aligning in Bootstrap

html

css

media-queries

responsive-design

twitter-bootstrap