Question

我一直试图在我的网站上的“个人资料图片”上添加一个通知和消息按钮，我有一个有趣的造型。现在我似乎无法弄清楚如何用它附近的一个glyphicon放置这个跨度，并且仍然有响应。

以下是我有点喜欢的图片：PICTURE

以下是我目前的情况：PICTURE2

这是当前的设置：

HTML

<div class="col-xs-12 profile-preview">
                <img id="profile-picture" src="assets/person.png">
                <span id="message-button" class="glyphicon glyphicon-comment"></span>
            </div>

CSS

#message-button{
position: relative;
border-radius: 50%;
border: 5px solid green;
background-color: green;

}

我根本不知道如何将glyphicon-comment跨度移动到图像上，并且仍能使其响应。

Answer 1

我更容易在一个文件中构建它然后键入几十行解释。关键是让bootstrap在对齐和居中方面为你完成所有工作。

我只是为配置文件图片使用了一个css类col-xs-12，然后您只需使用类row的2个div容器启动一个新的引导程序col-xs-6 col-sm-6 col-md-6 col-lg-6。这样可以随时为您提供2个相同的盒子。其余的，按钮和图标的样式是一个简单的工作。

我希望这可以帮助您理解这个概念，您可以将此代码复制/粘贴到一个HTML文件中并查看结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Responsive Profile Image with Button</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        body {
            background: #3D3A3A;
        }
        .profile-preview {
            /* this centers all child elements */
            text-align: center;
            margin-top: 100px;
            background: none;
            padding: 20px;
        }
        .profile-picture {
            position: relative;
            top: 0;
        }
        .profile-buttons {
            background: #272424;
            width: 100px;
            height: 100px;
            font-size: 3em;
            border: 0;
            border-radius: 50%;
        }
        .glyphicon {
            position: relative;
            top: 5px;
            color: #D9D9D9;
        }
        /* Correction of the icon */
        .glyphicon-option-vertical {
            margin-left: 6px;
        }
        /* the green message dots */
        .number-of-messages {
            position: absolute;
            top: -5px;
            background: #8DAE00;
            color: #D9D9D9;
            font-size: 14px;
            padding: 5px;
            border-radius: 14px;
        }
</style>
</head>
<body>

<div class="container">
<div class="row">
    <div class="col-xs-12 profile-preview">
        <img class="profile-picture img-circle" src="http://placekitten.com/262/262/">
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-6">
                <button class="profile-buttons" id="message-button">
                    <span class="glyphicon glyphicon-comment"></span>
                    <span class="number-of-messages">3</span>
                </button>
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <button class="profile-buttons" id="comment-button">
                    <span class="glyphicon glyphicon-option-vertical"></span>
                    <span class="number-of-messages">2</span>
                </button>
            </div>
        </div>
    </div>
</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">    </script>
</body>
</html>

为了更改不同设备上按钮的距离/宽度，只需更改单个组的宽度等级即可使它们更近或更宽。 *-offset-*也很有帮助。

您还可以使用课程img-responsive为您的图片提供width:100%;height:auto属性，以便做出响应。

Bootstrap |将图像/跨度放在图像上方，仍然能够响应？

1 个答案: