Question

我是bootstrap的新手，我一直在设计一个出租车网站。我有一个问题，网站的整个容器更靠近屏幕的右侧，它不在屏幕的中心。我想这个问题可能与jumbotron有关。背景图像的大小是 1400x562。我该如何解决？

网站预览（http://threeguys.us/works/employee.html）

的index.html

<div class="container">
   <div class="jumbotron">

    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#"><img src="images/logo/logo.png" width="250px" height="70px"></a>
            </div>

            <div>

                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="index.html"><img src="images/navigation_hover/home.png" width="100px" height="70px"></a></li>
                    <li><a href="rates.html"><img src="images/navigation/rates.png" width="100px" height="70px"></a></li>
                    <li><a href="employee.html"><img src="images/navigation/employee.png" width="140px" height="70px"></a></li>
                    <li><a href="contact_us.html"><img src="images/navigation/contact.png" width="140px" height="70px"></a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="call_button">
         <button type="button" class="btn btn-default">call us</button>
    </div>
</div><!--jumbotron end-->
</div><!--container end-->

的style.css

 .jumbotron
 {
   background: url(images/car/car.png) no-repeat ;
   background-size: 100%;
   height: 562px;
   width: 1400px;
   padding-top: 0px;
  }
  .navbar {
     /* height: 70px; */
     background-color: transparent;
     border:0px;
    }
     .navbar-brand {
     padding-top: 15px;

     }

Answer 1

有几个选择：

将class ='jumbotron'放在class ='container'之外; class ='container'默认具有特定宽度（1170px）。所以你想要你的结构：
```
        <div class='jumbotron'>content here</div>
        <div class='container'>content here</div>  
```

OR

调整'container'类的宽度。尝试75％。我建议在外部引导程序中执行此操作，甚至可以在标记上内联：
```
       <div class='container' style='width:75% !important'> 
```

希望这会有所帮助。

我有bootstrap的问题

1 个答案: