bootstrap кнопка не работает внутри jumbotron

Question

Я не могу нажимать на свою кнопку и наведение не делает ничего на ней. Это внутри jumbotron, который я настроил немного, как вы можете видеть на моем дампе с консоли 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

Вы пытались изменить z-index своей кнопки?

Редактировать: Я копирую свой код в проект, который я разрабатываю, и он работает!

Answer 2

Вы, вероятно, забыли добавить контейнер. Если вы покидаете контейнер, кнопки находятся за пределами div jumbotron. Вот как это работает для меня (без каких-либо настроек):

%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" 

Надеюсь, это поможет.