Question

我有两个按钮，我试图彼此相邻，以页面为中心。最简单的方法是将它们放入div中，但是当我这样做时，按钮会变得无法响应。他们放松了悬停和点击功能。我已经尝试更改我的背景div，包装div和按钮的z-index但是没有做任何事情。这是我的代码：

<!DOCTYPE html>
<html>
{% load staticfiles %}
{% load rest_framework %}
<head>
    <link type="text/css" rel="stylesheet" href="https://bootswatch.com/yeti/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="{% static 'app/index.css' %}">
<title>Home</title>
</head>

<body>
{% if messages %}
    {% for message in messages %}
        {{ message }}
    {%endfor%}
{%endif%}
{% verbatim %}
<div id="background"></div>
<div id="wrapper">
    <a href="/signup" class="btn btn-primary">Sign Up Now!</a>
    <a href="" class="btn btn-info">Learn More</a>
</div>

<div id="topwrapper">
    <a href="/login">
        <div id="login">Log in</div>
    </a>
    <a href="/signup">
        <div id="signup">Sign Up</div>
    </a>
</div>
<h1>Catchy Interesting Hook.</h1>
<p>Lorem ipsum stuff blah blah blah</p>
<h2>What is this website?</h2>
{% endverbatim %}
</body>
</html>

topwrapper div中的链接工作，但它们不是引导按钮。注意：{% %}里面有趣的代码是Django的东西，我已经安装了各种django-bootstrap插件，所以也许这就是弄乱我的按钮？但我是django的新手，所以我真的不知道怎么去调查那个。然后我的CSS是：

#background {
    background-color: #5f6273;
    height: 500px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    border-width: 0px;
    margin: 0px 0px 0px 0px;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: -30;
}
#wrapper {
    text-align: center;
    margin: 0 auto;
    margin-top: 300px;
    background: none;
    width: 320px;
    display: inline;
    z-index: -1;
}
#topwrapper {
    width: 300px;
    display: inline;
    background-color: none;
    margin: auto;
    height: 100px;
    margin-right: 0;
    z-index: 0;
    padding: 20px;
}
#login {
    border-radius: 2px;
    border-color: #ffffff;
    height: 30px;
    width: 140px;
    left: 30%;
    margin: auto;
    padding-top: 10px;
    text-align: center;
    font-family: sans-serif;
    color: #ffffff;
    z-index: 30;
}
#signup {
    left: -50%;
    font-family: sans-serif;
    color: #ffffff;
    height: 30px;
    width: 70px;
    z-index: 30;
    margin: auto;
}
.btn-primary {
    float: left;
    margin-left: auto;
    z-index: 31;
}
.btn-info {
    float: right;
    margin-right: auto;
    z-index: 31;
}
h1 {
    font-family: sans-serif;
    text-align: center;
    color: #ffffff;
    padding-top: 160px;
}
h2 {
    font-family: sans-serif;
    text-align: center;
    color: #000000;
    padding-top: 275px;
    z-index: 30;
}
p {
    font-family: serif;
    text-align: center;
    color: #ffffff;
    padding-top: 0px;
}

Answer 1

我保持你所有的css都一样，但是在删除django的东西时，在html中稍微改了一下......链接正常工作。尝试将django代码添加到此：

<body>
    <div id="background"></div>
    <div id="wrapper">
        <button class="btn btn-primary"><a href="/signup">Sign Up Now!</a></button>
        <button class="btn btn-primary"><a href="/login">Learn More</a></button>
    </div>

    <div id="topwrapper">
        <a href="/login">
            <div id="login">Log in</div>
        </a>
        <a href="/signup">
            <div id="signup">Sign Up</div>
        </a>
    </div>
    <h1>Catchy Interesting Hook.</h1>
    <p>Lorem ipsum stuff blah blah blah</p>
    <h2>What is this website?</h2>
</body>

为什么Bootstrap按钮在放入DIV时会停止工作？

1 个答案: