css - Bootstrap 按钮在超大屏幕内不起作用

Question

我无法点击我的按钮并且悬停在它上面没有任何作用。它位于一个超大屏幕内，我对其进行了一些定制，您可以在 Firefox 控制台的转储中看到这一点。

<div class="jumbotron" id="jumbotron-main">
  <h1 class="hidden-phone" style="font-weight: normal;"  id="index-title">heading</h1>
                                <br />
                <h2 class="subheading" id="index-subtitle">hello</h2>
                <br /> <br />

                <a
                    class="btn btn-large btn-success"  href="http://mylink"  id="index-try-mojo">click</a>
</div>

这是 firefox 控制台中显示的内容:

element {
}
#jumbotron-main {
    box-shadow: none;
    background-color: rgb(250, 250, 250) !important;
    color: rgb(51, 51, 51);
    text-shadow: none;
    border-bottom: 1px solid rgb(229, 229, 229);
    border-top: 1px solid rgb(229, 229, 229);
}
.jumbotron {
    position: relative;
    padding: 20px 0px;
    color: rgb(255, 255, 255);
    text-align: center;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4), 0px 0px 30px rgba(0, 0, 0, 0.075);
    background: none repeat scroll 0% 0% rgb(0, 136, 204);
    box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.2) inset, 0px -3px 7px rgba(0, 0, 0, 0.2) inset;
}
.jumbotron {
    text-align: center;
    padding: 50px 0px 40px;
    margin-bottom: 10px;
    border-top: 1px solid rgb(229, 229, 229);
    border-bottom: 1px solid rgb(229, 229, 229);
    background-color: rgb(250, 250, 250);
}
.jumbotron {
    padding-top: 48px;
    padding-bottom: 48px;
}
.jumbotron {
    padding: 30px;
    margin-bottom: 30px;
    font-size: 21px;
    font-weight: 200;
    line-height: 2.14286;
    color: inherit;
    background-color: rgb(238, 238, 238);
}
*, *:before, *:after {
    -moz-box-sizing: border-box;
}
body {
    color: rgb(51, 51, 51);
}
body {
    color: rgb(51, 51, 51);
}
body {
    line-height: 1.4;
}
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857;
    color: rgb(51, 51, 51);
}
html, button, input, select, textarea {
    color: rgb(34, 34, 34);
}
html {
    font-size: 62.5%;
}
html {
    font-family: sans-serif;
}

有什么想法吗？

Answer 1

您可能忘记添加容器。如果您将容器放在外面，则按钮位于 jumbotron div 之外。以下是它对我的工作方式(没有任何定制):

  %div.jumbotron
    %div.container
      %div.page-header
        %h1 Employee Login
      %div.col-sm-12
        %div.input-group.input-group-lg
          = f.email_field :email, required: true, autofocus: true, :class => "form-control", :placeholder => "Email"
      %div.col-sm-12
        %div.input-group.input-group-lg
          = f.password_field :password, required: true, :class => "form-control", :placeholder => "Your Password"

希望这对您有所帮助。