0

少し問題があります。でテンプレートを作成しtwitter-bootstrapていますが、これら2つの問題に遭遇しました。ここで私のサイトを見ることができます：

http://jsfiddle.net/e9SGL/embedded/result/ - フルスクリーン
http://jsfiddle.net/e9SGL/ - コード付きの小さなもの

ご覧のとおり、サイトは中央に配置されていません。中央から 5px 右に配置されます。動いていることは知っていpadding: 5px;ますが、パディングがないと奇妙に見えるので、そのパディングを維持したいと思います。

2 番目の問題は、そのテキスト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> my@mail.com</p>
            </div>
        </div>
    </div>
</html>

賢い.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 と bootstrap-responsive.css は編集されません。デフォルトのブートストラップ CSS です。

どうもありがとうございました。

4

2 に答える 2

1

問題 #1 を修正する方法はおそらくいくつかありますが、これでうまくいきます。

.row-fluid {
    width: auto;
}

問題 #2 に関しては、ID 'header' を持つ div は表示されませんが、単に #logo を #menu の下に移動する必要があるように見えます。

編集: div#head が表示されます。多分それはあなたが意味したものです。ただし、Firefox では #logo は #head の下にあります。どうか明らかにしてください。

もう一度編集します：これを行うことができます：

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

繰り返しますが、多くのオプションがあります。

于 2013-04-23T16:56:16.307 に答える
0

すべての混乱と不要なコードを削除し、配置するだけです

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

このコードは、ページを中央に揃えます。

2 番目の問題は非常に簡単です。css に飛び込むだけです。

それが役に立てば幸い。

于 2013-04-23T17:20:19.440 に答える