0

こんにちは、これについて私を助けることができる人はいますか。wordpress サイトでブートストラップの流動的なレイアウトを試しています。どうやら、正常に動作していないようです。.span 12 列を作成しましたが、ブラウザーの全幅を占めていません。代わりに、その幅が縮小しました。これを回避する方法はありますか？

カスタムページテンプレートを使用して作成した実験は次のとおりです

<?php
/*
Template Name: page-work
*/
?>
<?php get_header(); ?>    
<h1><?php the_title(); ?></h1>

<style type="text/css">

.span12{
    background:black;
    color:white;
    padding:20px 0;
    text-align:center;
    margin-top:15px;
}

.span6{
    background:blue;
    color:white;
    padding:20px 0;
    text-align:center;
        margin-top:15px;
}

</style>

<div class="container-fluid">

   <div class="row-fluid">

     <div class="span12">span 12</div>

</div>

   <div class="row-fluid">

     <div class="span6">span 6</div>
     <div class="span6">span 6</div>

   </div>

</div>
4

2 に答える 2

0

Bootstrap 3 にアップグレードすることをお勧めします。Bootstrap 3 の方がはるかに優れた方法で流体コンテナーを処理でき、そもそもこの問題は発生しないからです。

.span12 は col-xx-12 (xx は xs、sm、md、および lg のいずれかです...それを読んでください!) になり、幅は 100% になります。上記の回答で述べたように、BS3 は固定幅ではなくパーセンテージ幅を使用します。BS2からBS3への移行もさほど難しくありません。

原則として、wordpress によって Web サイトの外観が実際に変わることはありません。それはあなたがその周りに置くスタイルなので、この場合のWordpressは無関係です.

于 2014-08-05T14:13:02.073 に答える
0

これは、ブートストラップが span12 の固定幅を持っているためです。 

.span12 {
    width: 1170px;
  }

より大きな画面用。

それでも必要な場合は、これを試すことができます：

@media (min-width: 1200px) {
    .span12 {
        width: 100%;
    }
}

常に子 css ファイルを作成し、それをブートストラップ ファイルの下に配置します。

于 2013-06-10T23:09:21.353 に答える