html - 导航栏未与 psd 对齐

标签 html css twitter-bootstrap twitter-bootstrap-3 psd

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

我正在使用 Bootstrap 版本 3.3.7

图片来自 Html 下面 enter image description here

图片来自 Psd

enter image description here

生成第一张图片的 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 我似乎必须将 margin-right 和 left 设置为 200px 才能使其对齐

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

引用的完整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;
}

但它使整个网站变成了 960 像素，我只想让导航和内容区域确认这一点，但让超大屏幕保持全宽。

编辑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 enter image description here

最佳答案

只需将导航栏包裹在 .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 -->

关于html - 导航栏未与 psd 对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47291137/

上一篇：javascript - Recharts - 水平对齐折线图和条形图

下一篇：css - Webpack:将 css 提取到自己的包中

相关文章：

image - 如何防止图像超出浏览器窗口设置页面宽度？

css - 在 bootstrap 中混合不同类型的列

javascript - IE 显示我的代码而不是我的网页，我该如何解决此问题？

html - 如何处理此类错误？

javascript - 除非调整窗口大小或单击链接两次，否则同位素 J-query 不会自动排列？

Css 定位列

css - 无法弄清楚正在应用/继承哪个 css 属性

html - 在 Twitter Bootstrap 中为列设置 100% 高度

jquery - 边界和边距问题

html - 图像对齐 - float 后间距不正确

©2024 IT工具网  联系我们