Elements not aligning in Bootstrap

2019-08-15 18:20发布

站内文章 / HTML/CSS
21 0 0

问题:

I would like for each icon to align with their respective heading.
But this is what it looks like instead:

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>

I tried to make this section in responsive ,I'll try and fix 992px and 768px media queries. I could not fix it in <=568px.

回答1:

I think your h4 elements have a margin-top.

You should add 'col-xs-12' class before 'col-sm-4'.
Something like :

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

Maybe just remove this margin-top will do the trick...

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

or add to this existing selector :

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

Maybe you've got too an other css file who override this margin-top.
So you just have to append a !important like this : 

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>

Here is a bootply to experiment : http://www.bootply.com/D7jGgqj9LC , you can click on the phone icon to test in smartphone view.



回答2:

Please try this:

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


标签： html css twitter-bootstrap responsive-design media-queries
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~