我希望每个图标都与其各自的标题对齐。
但这是它的样子:
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 中修复它。
最佳答案
我认为你的 h4元素有一个 margin-top .
您应该添加“col-xs-12” '之前的类(class)'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;
片段:
.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 ，您可以单击电话图标以在智能手机 View 中进行测试。
关于html - Bootstrap 中的元素不对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36680328/