Question

我环顾四周，我认为我正确使用了jumbotron元素，但由于某种原因，bootstrap无法正常工作。我尝试从另一个页面复制并粘贴一个工作的jumbotron，但这在这里不起作用。 Bootsrap css文件已正确连接，因为col-sm-6工作正常。提前谢谢！

P.S。 style.css是一个空的css文件

<!DOCTYPE html>
<html lang="es">
  <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Lorem</title>
     <meta name="description" content="">
     <meta name="keywords" content="">
     <meta name="author" content="">

     <link rel="stylesheet" type="text/css"  href="./css/bootstrap.css">
     <link rel="stylesheet" type="text/css"  href="./css/style.css">
     <link rel="stylesheet" type="text/css"  href="./css/bootstrap-theme.css">
     <link rel="stylesheet" type="text/css"  href="./css/normalize.css">

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script src="js/bootstrap.min.js"></script>
   </head>

  <body>
    <header></header>
    <div class="jumbotron login_main" >
        <div class="col-sm-6 vertical-center">
            <h1 class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
            <h2 class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</h2>
        </div>
        <form>
            <p>hello</p>
        </form>
    </div>
    <footer>

    </footer>   
  </body>
  </html>

Answer 1

    <div class="container">
        <div class="col-sm-6 col-sm-offset-3 vertical-center">
            <div class="jumbotron login_main" >
                <h1 class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
                <h2 class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</h2>
                <form>
                    <p>hello</p>
                </form>
            </div>
        </div>
    </div>

你想要将它全部包装在一个带有＆＃34;容器＆＃34;的元素中。引导网格系统使用12列，因此如果您要使用6列宽的元素，要使其居中，您需要将其偏移3.这里的代码应该可以使用。

Bootsrap是没有正确的diplaying元素，如jumbotron似乎没有工作

1 个答案: