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模板未對齊到中間

回答

相關問題