Bootstrap模板未对齐到中间

我遇到了一些问题。我正在构建一个模板twitter-bootstrap，我解决了这两个问题。在这里你可以看到我的网站：Bootstrap模板未对齐到中间

http://jsfiddle.net/e9SGL/embedded/result/ - 全屏
http://jsfiddle.net/e9SGL/ - 一个小的代码

正如你所看到的网站不居中对齐。它与中心向右对齐5px。我知道它被padding: 5px;移动了，但是我想保留这个填充，因为它没有它看起来很奇怪。

第二个问题是文字Mira's Koding。它在#logo div之上。我想把它放在#logo div的底部。这里是我的代码：

CSS引导和我的CSS。

<link rel="stylesheet" href="css/wise.css" type="text/css"> 
<link rel="stylesheet" href="css/bootstrap.css" type="text/css"> 
<link rel="stylesheet" href="css/bootstrap-responsive.css" type="display">

HTML

<html> 
    <div class="container-fluid" id="back"> 
     <div class="row-fluid" id="logo"> 
      <div class="span12">Mira's Koding</div> 
     </div> 
     <div class="row-fluid" id="menu"> 
      <div class="span12"> 
       <ul class="inline"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">My Work</a></li> 
       </ul> 
      </div> 
     </div> 
     <div class="row-fluid" id="content"> 
      <div class="span10" id="cleft"> 
       <h3>Example 1</h3> 
       <p>No need of long text here.</p> 
       <a href="#">Read more &rsaquo;&rsaquo;</a> 
       <hr> 
       <h3>Example 1</h3> 
       <p>Lorem ipsum...</a> 
      </div> 
      <div class="span2" id="cright"> 
       <h3>Author</h3> 
       <p><i class="icon-envelope"></i> [email protected]</p> 
      </div> 
     </div> 
    </div> 
</html>

wise.css

::selection { 
    color:#1f7bac; 
} 
::-moz-selection { 
    color:#1f7bac; 
} 
html, body { 
    background-color: #ebeaea; 
    overflow: auto; 
} 
#back { 
    background-color: #ebeaea; 
} 
#logo { 
    background-color: #1f7bac; 
    border-left: 1px solid #1f7bac; 
    border-right: 1px solid #1f7bac; 
    height: 50px; 
    font-size: 28px; 
    padding: 5px; 
    color: white;  
} 
#menu { 
    background-color: #fff; 
    border-left: 1px solid #1f7bac; 
    border-right: 1px solid #1f7bac; 
    border-bottom: 1px solid #1f7bac; 
    padding: 5px; 
    height: 20px; 
    margin-bottom: 20px; 
} 
#content { 
    background-color: white; 
    border: 1px solid #1f7bac; 
    padding: 5px; 
} 
.footer { 
    height: 100px; 
    background-color: #1f7bac; 
    position:fixed; 
    bottom:0; 
    width: 100%; 
}

bootstrap.css和自举-responsive.css不编辑。它是默认的引导CSS。

非常感谢。

来源

2013-04-23 Kyrbi

可能有多种方式来解决问题＃1，但是这一次的伎俩：

.row-fluid { 
    width: auto; 
}

至于问题＃2，我没有看到ID为“头一个div '，但它在我看来就像你只需要将#logo移到#menu下面。

编辑：我看到一个div＃头。也许这就是你的意思。但是，在Firefox中，#logo低于#head。请澄清。

再次编辑：你可以这样做：

#logo {position: relative;} 
#logo > div {position: absolute; bottom: 0;}

同样，你有多种选择。

来源

2013-04-23 16:56:16 isherwood

谢谢，它的工作原理。我的错误，我的意思是#logo，而不是#header。刚编辑我的问题。 – Kyrbi 2013-04-23 17:00:02

卸下所有的混乱和不必要的代码，只需将

.container, .container-fluid {margin: 0 auto;}

此代码将调整你的页面中心。

你的第二个问题很简单，就是潜入css。

希望它有帮助。

来源

2013-04-23 17:20:19

Bootstrap模板未对齐到中间

回答

相关问题