导航栏没有与psd排队

Question

我有一个基于960网格系统的psd，我正在使用bootstrap进行转换，但导航栏的左侧和右侧有填充但是我觉得我做得不对，即使看起来不错< / p>

我正在使用bootstrap版本3.3.7

来自Html的图片

来自Psd的图片

为其生成第一张图片的Html。

<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div class="navbar-inner">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Home</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#works">Works</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
    <div class="jumbotron">
      <div class="jumpbotron-inner text-center">
        <h1>We build well desgined websites</h1>
        <h4>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</h4>
        <span>
        <a class="btn btn-primary btn-large">
        Get Started
        </a>
        </span>
        <span>
        <a class="btn btn-primary btn-large">
        Learn More
        </a>
        </span>
        <br />
        <img src="image/browser.png">
      </div>
    </div>

CSS生成第一个图像我似乎必须将边距向右和向左放置200px以使其排成一行

.navbar-inverse .navbar-brand {
    margin-left: 220px;
    color: white !important;
    font-size: 64px;
}
.navbar-fixed-top {
    border: none;
    margin-right: 220px;
}

完成ref的css

/*--------------begin header -------------*/

body > div.navbar.navbar-inverse.navbar-fixed-top {
    background: transparent;
}
.navbar-fixed-top {
    border: none;
    margin-right: 220px;
}
.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: none !important;
    box-shadow: none !important;
}
.jumbotron {
    background-image: url(image/background.png);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    padding: none !important;
    padding-bottom: none !important;
    margin-bottom: 0;
    max-height: 490px;
}
body > div.jumbotron > div > h1 {
    color: white;
    font-weight: bold;
}
body > div.jumbotron > div > h4 {
    color: white;
    font-weight: bold;
}
body > div.navbar.navbar-inverse.navbar-fixed-top > div.navbar-inner > ul > li:nth-child(1) > a {
    background-color: black;
    color: white !important;
    font-weight: bold;
}
ul li a {
    color: white;
    font-weight: bold;
}
.navbar-inverse .navbar-nav>li>a {
    color: white !important;
    font-weight: bold !important;
}
.navbar-brand {
    background-image: url (image/brand.png);
    background-repeat: no-repeat;
}
.navbar-inverse .navbar-brand {
    margin-left: 220px;
    color: white !important;
    font-size: 64px;
}
.navbar-fixed-top {
    border: none;
    margin-right: 220px;
}
/*--------------end header -------------*/
/*--------------begin services  -------------*/

.info-plan,
.info-design,
.info-develop,
.info launch {
    background-image: url('/image/services-sprtie.png');
    background-repeat: no-repeat;
}
.info-plan {
    height: 100px;
    background-position: -5px -5px;
}
/*--------------begin reset -------------*/

html,
body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
#navbar {
    margin-bottom: 0;
}
.alert {
    border-radius: 0;
}
.container {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
}
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-sm-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-sm-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-sm-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-sm-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-sm-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-sm-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-sm-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-sm-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-sm-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-sm-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-sm-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-sm-12 {
    position: relative;
    height: 100%;
    min-height: 1px;
    padding-right: 0;
    padding-left: 0;
}
.row {
    margin-right: 0;
    margin-left: 0;
}
.footer {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top: none;
}
.panel {
    border: none;
}
/*--------------end reset -------------*/

修改2

我尝试使用

.custom-container {
  border:1px solid red;
  max-width:960px;
}

但它使整个网站960px我只想要导航和内容区域确认，但让jumbotron保持全宽。

编辑3

这是我的尝试，但正如您将从屏幕截图3看到的那样无法正常工作

<div class="container">
     <div class="container custom-container">
<div class="navbar navbar-inverse navbar-fixed-top">

     <div class="navbar-header">
     <a class="navbar-brand" href="#">Project name</a>
    </div>
            <div class="navbar-inner">

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Home</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#works">Works</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>

       </div>
        </div>

        </div>

截屏3

Answer 1

只需将导航栏包装在.container div中即可。然后定位它并设置您选择的最大宽度。例如。 960px

.custom-container {
border:1px solid red;
max-width:760px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Start of container for navbar -->
<div class="container custom-container">
<!-- Start of container for navbar -->

<nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
              <li><a href="../navbar-static-top/">Static top</a></li>
              <li><a href="../navbar-fixed-top/">Fixed top</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>

<!-- End of container for navbar -->
</div>
<!-- End of container for navbar -->