Bootstrap 4 Beta - 应用背景图像给Jumbotron打破Form元素

当我遇到一个我找不到修复程序的问题时，我正在创建一个引导程序网站作为一个挑战。Bootstrap 4 Beta - 应用背景图像给Jumbotron打破Form元素

在jumbotron中，我有一个带有文本框和提交按钮的窗体。

文本字段还具有一个插件（输入基团的附加）

在没有任何图像中的附加组件是完全放置在它应该是但当我添加的图像的附加组件移动远离文本字段中的像素。

  .bg { 
 
       background-image: url("http://www.zastavki.com/pictures/originals/2013/Photoshop_Image_of_the_horse_053857_.jpg"); 
 
       text-align: center; 
 
       color: white; 
 
      } 
 
      .jumbotron form { 
 
       text-align: none; 
 
      } 
 
      .jumbotron hr { 
 
       background-color: white; 
 
      }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<body style="position: relative;" data-spy="scroll" data-target="#navBar"> 
 
     <nav id="navBar" class="navbar navbar-toggleable-md navbar-light bg-faded"> 
 
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
 
       <span class="navbar-toggler-icon"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">My App</a> 
 
      <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
 
       <ul class="navbar-nav mr-auto"> 
 
        <li class="nav-item active"> 
 
         <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a> 
 
        </li> 
 
        <li class="nav-item"> 
 
         <a class="nav-link" href="#">Features</a> 
 
        </li> 
 
        <li class="nav-item"> 
 
         <a class="nav-link" href="#">Download</a> 
 
        </li> 
 
       </ul> 
 
       <form class="form-inline my-2 my-lg-0"> 
 
        <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
 
        <button class="btn btn-success my-2 my-sm-0" type="submit">Search</button> 
 
       </form> 
 
      </div> 
 
     </nav> 
 
     <div class="jumbotron bg"> 
 
      <h1 class="display-3">My Amazing App!</h1> 
 
      <p class="lead">The MAIN reason for YOU to download THIS app on your handheld Android or iOS device.</p> 
 
      <hr class="my-4"> 
 
      <p class="lead">Want to learn more ? Join our Mailing List and get a free bonus.</p> 
 
      <form class="form-inline justify-content-center"> 
 
       <label class="sr-only" for="email">Email</label> 
 
       <div class="input-group mb-2 mr-sm-2 mb-sm-0"> 
 
        <div class="input-group-addon">@</div> 
 
        <input style="width: 350px;" type="email" class="form-control" id="email" placeholder="Your Email"> 
 
       </div> 
 
       <button type="submit" class="btn btn-primary">Sign Up</button> 
 
      </form> 
 
     </div>

来源

2017-08-17 Demoncious

自举4，仍处于测试阶段释放，施加高透明边框为.FORM控制类。您的示例突出显示了如何针对背景为黑色的容器使用输入元素时，这可能会产生意想不到的结果。 Bootstrap 4的默认样式是这样的：

.form-control { 
    border-color: rgba(0, 0, 0, 0.15); 
}

这是一个具有接近最大透明度的黑色边框。正如你发现的那样，在黑暗的背景下渲染不会达到预期的效果。

我附加了一个自定义类来覆盖.form控件类的Bootstrap 4的默认边框颜色。应用于你的例子，它只有在.bg类也被应用于jumbotron时才有效。

.bg .form-control.solid-gray-border { 
    border-color: rgb(222,222,222); 
}

.bg { 
 
       background-image: url("http://www.zastavki.com/pictures/originals/2013/Photoshop_Image_of_the_horse_053857_.jpg"); 
 
       text-align: center; 
 
       color: white; 
 
      } 
 
      .jumbotron form { 
 
       text-align: none; 
 
      } 
 
      .jumbotron hr { 
 
       background-color: white; 
 
      } 
 
      .bg .form-control.solid-gray-border { 
 
       border-color: rgb(222,222,222); 
 
      }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<body style="position: relative;" data-spy="scroll" data-target="#navBar"> 
 
     <nav id="navBar" class="navbar navbar-toggleable-md navbar-light bg-faded"> 
 
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
 
       <span class="navbar-toggler-icon"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">My App</a> 
 
      <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
 
       <ul class="navbar-nav mr-auto"> 
 
        <li class="nav-item active"> 
 
         <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a> 
 
        </li> 
 
        <li class="nav-item"> 
 
         <a class="nav-link" href="#">Features</a> 
 
        </li> 
 
        <li class="nav-item"> 
 
         <a class="nav-link" href="#">Download</a> 
 
        </li> 
 
       </ul> 
 
       <form class="form-inline my-2 my-lg-0"> 
 
        <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
 
        <button class="btn btn-success my-2 my-sm-0" type="submit">Search</button> 
 
       </form> 
 
      </div> 
 
     </nav> 
 
     <div class="jumbotron bg"> 
 
      <h1 class="display-3">My Amazing App!</h1> 
 
      <p class="lead">The MAIN reason for YOU to download THIS app on your handheld Android or iOS device.</p> 
 
      <hr class="my-4"> 
 
      <p class="lead">Want to learn more ? Join our Mailing List and get a free bonus.</p> 
 
      <form class="form-inline justify-content-center"> 
 
       <label class="sr-only" for="email">Email</label> 
 
       <div class="input-group mb-2 mr-sm-2 mb-sm-0"> 
 
        <div class="input-group-addon">@</div> 
 
        <input style="width: 350px;" type="email" class="form-control solid-gray-border" id="email" placeholder="Your Email"> 
 
       </div> 
 
       <button type="submit" class="btn btn-primary">Sign Up</button> 
 
      </form> 
 
     </div>

来源

2017-08-18 07:13:40 zero2cx

太感谢你了，它的工作很大：d – Demoncious

Bootstrap 4 Beta - 应用背景图像给Jumbotron打破Form元素

回答

相关问题