Question

目前我正在为我的网站添加一个图标“服务”部分。我知道旁边没有css，这就是我在这里发帖的原因。我想拥有它，以便图标所在的那种“块”不会到达页面的边缘，并留下一个宽度类似于彼此边缘的边距。我很感激这方面的帮助。非常感谢。我已经包含了一个指向我的JSFiddle的链接，如果不是太麻烦，我会以编辑后的版本的形式感谢您的回答。

http://jsfiddle.net/hqtzaycq/2/

<div class="row">
                <div id="about">
                 <div class="col-lg-4  col-md-4 col-sm-4">
                     <div class="about-div">
                     <i class="fa fa-paper-plane-o fa-4x icon-round-border" ></i>
                   <h3 >Lorem ipsum</h3>
                 <hr />
                       <hr />
                   <p >
                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                        Aenean commodo . 

                   </p>
               <a href="#" class="btn btn-info btn-set"  >Lorem ipsum</a>
                </div>
                   </div>
                   <div class="col-lg-4  col-md-4 col-sm-4" data-scroll-reveal="enter from the bottom after 0.5s">
                     <div class="about-div">
                     <i class="fa fa-bolt fa-4x icon-round-border" ></i>
                   <h3 >Lorem ipsum</h3>
                 <hr />
                       <hr />
                   <p >
                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                        Aenean commodo . 

                   </p>
               <a href="#" class="btn btn-info btn-set"  >Lorem ipsum</a>
                </div>
                   </div>
                 <div class="col-lg-4  col-md-4 col-sm-4" data-scroll-reveal="enter from the bottom after 0.6s">
                     <div class="about-div">
                     <i class="fa fa-magic fa-4x icon-round-border" ></i>
                   <h3 >Lorem ipsum</h3>
                 <hr />
                       <hr />
                   <p >
                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                        Aenean commodo . 

                   </p>
               <a href="#" class="btn btn-info btn-set"  >Lorem ipsum</a>
                </div>
                   </div>

                 </div>
               </div>

.body {
  background-color: #efefef;
}
.about-div {
    padding: 30px;
    border-bottom: 1px solid #dbdbdb;
    background-color: #f7f7f7;
}

.icon-round-border {
    border: 10px double #efefef;
    color: #2b2e2f;
    text-align: center;
    padding-top: 15px;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    cursor: pointer;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

    .icon-round-border:hover {
        color: #efefef;
        border: 10px double #fff;
        background-color: #414546;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
    }

.about-div hr {
    border: 1px solid #2b2e2f;
}

.about-div h3 {
    font-size: 25px;
    font-weight: 700;
    text-transform: uppercase;
}

.about-div p {
    padding-top: 10px;
}

.btn-set {
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    margin-bottom: 50px;
}
.about {
    Width: 90vw;
}

Answer 1

用clearfix替换行。这样你就可以回收原生边距和填充，而不是覆盖它。

删除它：

<div class="row">

然后添加此

<div class="clearfix">

新前端开发人员所犯的最大错误之一是在问题在于首先使用正确的类时覆盖类。 :)它发生了。

您的jfiddle

在CSS中添加一个边距（至少我认为我正在尝试做什么？）

1 个答案: