web-dev-qa-db-ja.com

bootstrap containerの最小高さを設定する方法

ブートストラップのコンテナに問題があります。私の目標は、コンテンツと同じ高さのコンテナーを作成することです。例えば：

<div class="container">
  <img src="#.jpg" height="200px" width="300px">
</div>

上記の例では、コンテナは画像と同じ高さでなければなりません。ただし、CSSを介してコンテナのmin-heightを0pxに設定しても、ブラウザは要素スタイルに594pxのmin-heightを自動的に統合します。ブラウザのソースコードは次のようになります。

<div class="container" style="min-height: 594px;">
  <img src="#.jpg" height="200px" width="300px">
</div>

ただし、HTMLファイルでは、style要素は定義されていません。これは、IEと同様にChromeで発生します。したがって、CSSコード（min-height：0px;）は無視されます。

CSS：

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
   max-width: 900px;
   overflow:hidden;
   min-height:0px;
}

この問題をどのように修正できるかについてのアイデアはありますか？

htmlcsstwitter-bootstrapcontainers
20
Clems

ここで2つのことが起こっています。

  1. コンテナクラスを適切に使用していません。
  2. コンテナクラスのBootstrapのCSSをオーバーライドしようとしています

ブートストラップはグリッドシステムを使用し、.containerクラスは独自のCSSで定義されます。グリッドは、コンテナクラスDIV内に存在する必要があります。コンテナーDIVは、Bootstrap内のグリッドがその親を持っていることを示しています。したがって、コンテナーの高さを設定することはできません。

やりたいことは次のとおりです。

<div class="container-fluid"> <!-- this is to make it responsive to your screen width -->
    <div class="row">
        <div class="col-md-4 myClassName">  <!-- myClassName is defined in my CSS as you defined your container -->
            <img src="#.jpg" height="200px" width="300px">
        </div>
    </div>
</div>

ここ Bootstrapグリッドシステムに関する詳細情報を参照できます。

つまり、もしあなたが絶対にBootstrap CSSをオーバーライドしなければならないのなら、CSS定義に "！important"句を使用してみます...

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
   max-width: 900px;
   overflow:hidden;
   min-height:0px !important;
}

しかし、 "！important"句は厄介なCSSを作成するだけであることが常にわかっています。

18
MikeV

height: auto; divで.containerを試しましたか？

fiddle です。imgの高さを変更すると、コンテナの高さはそれに合わせて調整されます。

[〜＃〜] edit [〜＃〜]

したがって、インラインmin-heightを「変更できない」場合は、!importantパラメーターでインラインスタイルを上書きできます。これは最もクリーンな方法ではありませんが、問題を解決します。

.containerclassにこの行を追加します

min-height:0px !important;

例をあげるためにフィドルを更新しました。

1
Ramiz Wachtler