Question

我知道这应该是非常直接的，但当我想我现在正在做的事情时，它就不对了。

基本上我想要做的就是将以下图标/按钮放入网格布局中，以便更好地定位并且响应迅速。

现在我使用CSS定位它们 - 左：250px;上：50px;我知道这是错误的或绝对不是最好的方法。

继承人JFiddle：

＆＃13;

body {
    background-color: black;
  }

.fa-linkedin {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid white;
    padding: 50px;
    position: absolute;
    transform: rotate(45deg) translate(25px);
    top: 50px;
    left:195px;
}

.fa-linkedin span {
    position: absolute;
    transform: rotate(-45deg) translate(0, -14px);
}
    
.fa-linkedin:hover {
    background-color: white;
    color: black;
    border-color: black;
}    
    
.fa-twitter {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid white;
    padding: 50px;
    position: absolute;
    transform: rotate(45deg) translate(25px);
    top: 130px;
    left:115px;
}

.fa-twitter span {
    position: absolute;
    transform: rotate(-45deg) translate(0, -14px);
}
    
.fa-twitter:hover {
    background-color: white;
    color: black;
    border-color: black;
}        
    
.fa-envelope {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid white;
    padding: 50px;
    position: absolute;
    transform: rotate(45deg) translate(25px);
    top: 130px;
    right:185px;
}

.fa-envelope span {
    position: absolute;
    transform: rotate(-45deg) translate(0, -14px);
}
    
.fa-envelope:hover {
     background-color: white;
     color: black;
     border-color: black;
}
    
.fa-briefcase {
    color: black;
    background-color: #ba0e1e;
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid black;
    padding: 50px;
    position: absolute;
    transform: rotate(45deg) translate(25px);
    top: 210px;
    right: 265px;
}

.fa-briefcase span {
    position: absolute;
    transform: rotate(-45deg) translate(0, -14px);
}
    
.fa-briefcase:hover {
     background-color: black;
     color: #ba0e1e;
     border-color: #ba0e1e;
}

＆＃13;

<body> 
                        <a href="k"><i class="fa fa-linkedin"></i></a>
                        <a href="http://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a>
                        <a href="mailto:@gmail.com"> <i class="fa fa-envelope"></i></a>
                        <a href="#portfolio"><i class="fa fa-briefcase"></i></a>

  </body>

＆＃13;

我如何将这些放入响应式网格中？

非常感谢

使用Boostrap的菱形图标/按钮的网格布局

0 个答案: