2017-04-03 8 views
0

これは、ウィンドウが広すぎると、幅が1000pxを超えて広がっていると、ページの情報があまりにもゆるいレイアウトになってしまうためです。ブートストラップ3と4を使用する場合、ページコンテンツの最大幅を適切に設定するにはどうすればよいですか?

あなたが全体の幅にまたがることができフッターを持つことができる場合、私は

body { max-width: 1000px } 

が、何を考えるだろうか?ページのメインコンテンツ部分が

<div id="root"> 

</div> 

または

<main id="main"> 

</main> 

内にある場合について、それではただ

#root { max-width: 1000px } 

または

main { max-width: 1000px } 

を使用すると、それが良い何ですかボーのスタイリングルールと一緒にそれを行う方法オットストラップ3と4?

+0

https://v4-alpha.getbootstrap.com/layout/overview/#containersはありません – DavidG

答えて

1

定義された正しい方法はありません。ブートストラップ方法は、container(定義された幅)またはcontainer-fluid(全幅)を使用することです。あなたはcontainer以外のページの幅をしたい場合は、カスタム「ラッパー」クラスを定義し、その容器内部流体を使用して...第二思想に

.wrapper { 
    max-width: 1000px; 
    margin: 0 auto; 
} 

<div class="wrapper"> 
    <div class="container-fluid"> 
    </div> 
</div> 
<footer></footer> 

したいので、containerをカスタマイズする方が良いだろうコンテンツはコンテナの中央に配置されます。

@media (min-width: 1200px) { 
    .container.container-custom { 
     max-width: 1000px; 
    } 
} 

デモ:http://www.codeply.com/go/k5QtAfRysh

それは本当にカスタムアプローチのいずれかの方法だと、何の "適切な方法"

+0

だから、 '.container、.container-fluid {max-width:1000px}'もやってもいいと思っていますか? –

+0

'wrapper'は' main'または '#root'コンテナを使用するのと似ているはずです –

+0

あなたは' .container、.container-fluid'だけをそのまま残して、スタイルを直接変更しないでください。 –

関連する問題