BootStrap Jumbotron宽度

Question

我的jumbotron引导程序宽度可以覆盖整个页面。我想实现一种不覆盖整个页面的样式。我可以应用任何可以调整宽度的属性吗？

/* style -- this is the stylesheet */

.jumbotron {
    font-size: 17px;
    cursor: pointer;
    width: 5px;
}

Answer 1

.mycustom-jumbotron {
  border:10px solid #003366;
  width: 300px;
  margin: 0 auto
}

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<div class="jumbotron mycustom-jumbotron text-center">
  <h1>Bootstrap</h1>
  <p>Bootstrap Web Design</p> 
</div>

Answer 2

.jumbotron-test {
    font-size: 17px;
    cursor: pointer;
    width: 50%;
    text-align:Center;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<div class="jumbotron jumbotron-test">
  <h1>Jumbotron</h1>
  <p>Testing Jumbo tron</p> 
</div>