如何使用Bootstrap 4將此窗體置於Jumbotron中？

-1

<!DOCTYPE html> 
<head> 
    <title>Destiny 2 App</title> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 

    <style type="text/css"> 

     body { 
      position: relative; 
     } 

     #email { 
      width: 300px; 
     } 

     .jumbotron { 
      text-align: center; 
     } 

     form { 
      width: 700px; 
      margin: 0 auto; 
      display: inline-block; 
      text-align: center; 
     } 
    </style> 
</head> 

<body> 
    <nav 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="#">Destiny 2 Analyzer</a> 

     <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
      <ul class="navbar-nav mr-auto"> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Home</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">About</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Download</a> 
       </li> 
      </ul> 
     </div> 
    </nav> 
    <div class="jumbotron"> 
     <h1 class="display-3">Destiny 2 Analyzer</h1> 
     <p class="lead">Delivering news and content about the new Bungie API pre-release Destiny 2</p> 
     <hr class="my-4"> 
     <p>Sign up below to keep up to date on all news as it breaks!</p> 

     <form class="form-inline"> //This form is what I want to center 
      <div class="container"></div> 
      <div class="form-group"> 
       <label class="sr-only" for="email">Email address</label> 
       <div class="input-group"> 
        <div class="input-group-addon">@</div> 
        <input type="text" class="form-control" id="email" placeholder="Email"> 
       </div> 
      </div> 
      <button type="submit" class="btn btn-primary">Submit</button> 
     </form> 
    </div>   

    <!-- jQuery first, then Tether, then Bootstrap JS. --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
    <script type="text/javascript"> 
    </script> 
</body>

請看錶格標籤，謝謝！我嘗試了所有可能的方法來集中它，但表單中的元素永遠不會居中！我感謝任何幫助。我正在努力完成這個項目，這個簡單的表格讓我絕對瘋了。如何使用Bootstrap 4將此窗體置於Jumbotron中？

來源

2017-05-08 Prodigy

將justify-content-center類添加到您的表單來解決此問題。

來源

2017-05-08 03:09:19

要：

<form class="form-inline">

地址：

<form class="form-inline justify-content-center">

來源

2017-05-08 03:54:52 MarkM

如何使用Bootstrap 4將此窗體置於Jumbotron中？

回答

相關問題