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

您可能忘记添加容器了。如果你把容器拿出来，按钮就在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"

希望这有帮助。

Answer 2

您是否尝试更改按钮的z-index？

编辑：我将您的代码复制粘贴到我正在开发的项目中，并且它正在运行！

Answer 3

如果您使用的是 react-bootstrap ，则使用自定义类修改z-index会导致奇怪的行为，因为背景图片和叠加层内容的z-indice相对值不同。

但是，我发现在bootstrap docs上，您可以使用div将内容包装在class="lead"中，从而针对重叠内容适当调整z索引和其他样式。 您根本不需要调整z索引！

<div className="jumbotron jumbotron-container">
  
  <img src={imgSrc} />

  <div className="lead"> // this class adjusts z-indices
    <h1>Hello</h1>
    <Button>Click here</Button> // clickable, hover styles also work
  </div>

CSS：

.jumbotron-container {
  position: relative;
  height: 100vh;

  > .img { 
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width:100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
  }

}

引导按钮不在jumbotron内工作

3 个答案: