1

ブラウザーの幅を縮小すると、ヘッダー div がブラウザーと共に縮小され、ページの幅全体が占有されることが予想されます。代わりに、div はブラウザーの幅で停止し、右側に空白スペースと水平スクロール バーが表示されます。これは、ブートストラップの使用方法に問題があるようですが、わかりません。どんな助けでも大歓迎

私は自分のプロジェクトで最新の縮小されたブートストラップ css を使用しており、以下のレイアウトを完全に単純化しています。

<!doctype html>
<html lang="en"> 

 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css" />
  <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
 </head>

 <body>
  <div class="row">
   <div class="header">
    <div class="container">
     <p>Lorem ipsum dolor sit amet</p>
    </div>
   </div>
  </div>
 </body>
</html>

CSS:

body {
 background-color: #CDE0E4;
 width: 100%;
}

.header {
 position: relative;
 height:120px;
 background-color:#CDE0E4;
 box-shadow: 0 0px 15px #272727;
}

ありがとう

4

2 に答える 2

0 
<div class="container">

一番上に来るはずです。行はコンテナ内にネストされ、最後に列は行内にネストされます。順序を逆にしました。これは、コードの問題の 1 つです。

于 2014-03-29T17:18:07.140 に答える
0

必要なのは流動的なレイアウトです(ドキュメントを参照してください)。この用語は、ブラウザー ウィンドウのサイズが変更されると、コンテンツが使用可能な最大幅を使用してサイズ変更されることを意味します。この場合、サフィックスのないバージョンの代わりに.container-fluidandを使用する必要があります。.row-fluid

しかし、Bootstrap のクラスの一部を悪用しています。

。行

複数列のレイアウトを作成する場合に使用します。このため.span*に、内部で使用するクラスがあります (例についてはドキュメントを参照してください)。

。容器

コンテンツの両側に余白を持たせたい場合に使用します (これは であり20px、.container-fluidで最大利用可能です.container)。

。ヘッダ

HTML5 を使用している場合 (これは を宣言して行います)、代わりに?<!doctype html>を使用しないのはなぜですか?<header><div class="header">

于 2012-09-12T22:31:09.560 に答える