web-dev-qa-db-ja.com

ブートストラップの行divを下に揃えるにはどうすればよいですか？

私は自分の行divまたは最後の要素をbottmに揃えようとしています。 bootstrap 3を使用しており、

<div id="main">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="logo col-centered">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 title text-center">THE TITLE</div>
    </div>
    <div class="row">
      <div class="col-md-5 col-centered text-center description">Lorem ipsum</div>
      <div class="description_arrow col-centered"></div>
    </div>
    <div class="row">
      <div class="col-md-5 col-sm-8 col-xs-12 col-centered">
        <div class="image-container">
          <img id="image-phone" src="img/image-phone.png" class="img-responsive" style="bottom:0px;">
        </div>
      </div>
    </div>
  </div>
</div>

私が持っているCSSで：

#main {
  min-height: 100%;
}

今それはそう見えます：

|------------------------|
|==========ROW===========|
|==========ROW===========|
|==========ROW===========|
|==========SPACE=========|
|==========SPACE=========|
|------------------------|

私はそう見えるようにしたい：今それはそう見える：

|------------------------|
|==========ROW===========|
|==========ROW===========|
|==========SPACE=========|
|==========SPACE=========|
|==========ROW===========|
|------------------------|

だから私は一番下の最後の行を保持したいのですが、どうすればいいですか？

編集：2°divのマージンボトムを使用できません。2°行divと最後の行divの間の距離が変化する可能性があるため、13インチ画面では高い値を望んでいないためです。ページがスクロール可能になりました。

EDIT2：私は位置を使用できません：固定と下部：0、div #mainの下に他のdivがあるため（常に高さ100％）。

回避策1：私はそうします：

<div id="main" style="position: relative;">

そして、行のdivクラスで私はします：

<div class="row" style="position:absolute; bottom: 0px; width: 100%;">

うまく機能しているようですが、それが良い解決策であるかどうかはわかりません...フィードバックを送ってください！

htmlcsstwitter-bootstrapresponsive-design
13
Riccardo

私が正しく理解している場合-margin-bottom 2行目に移動して、2行目と3行目の間に垂直スペースを作成しますか？

また、col-12はコンテナー内のdivにすることができます。行やcol-12クラスは必要ありません。

1
Whoa

私はこのようなspacerクラスを作成することを好みます：

.spacer{
    height: height in %;
}

次に、spacerクラスを次のように追加します。

<div class="row">
<div class="spacer">
<div class="row">

そうすることで、簡単に反応する行の間にスペースを設けることができます。

編集：

1280pxよりも高くないページがある場合は、最後の行がページの下部にくっつくようにしてみてください。

.row:last-child {
    position: fixed;
    bottom: 0;
}
1
Pizza lord

解決策は、クラスコンテナーを使用してdivにクラスd-flex、flex-columnおよびh-100を追加することです。

次に、mt-autoから最後のrowまで移動する必要があります。これにより、画面に残っているすべてのスペースにマージンが追加されます。したがって、これはすべての画面サイズで機能します。

また、html、body、およびdivの上にあるすべての要素でクラスcontainerが高さ全体を使用することも重要です。次のCSSでこれを達成できます：

html, body {
  height: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<style>
html, body, #main {
  height: 100%;
}
</style>

<div id="main">
  <div class="container-fluid d-flex flex-column h-100">
    <div class="row">
      <div class="col-md-12">
        <div class="logo col-centered">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 title text-center">THE TITLE</div>
    </div>
    <div class="row">
      <div class="col-md-5 col-centered text-center description">Lorem ipsum</div>
      <div class="description_arrow col-centered"></div>
    </div>
    <div class="row mt-auto mb-3">
      <div class="col-md-5 col-sm-8 col-xs-12 col-centered">
        <div class="image-container">
          <img id="image-phone" src="https://upload.wikimedia.org/wikipedia/commons/f/f7/Stack_Overflow_logo.png" class="img-responsive" style="max-width: 100px; bottom:0px;">
        </div>
      </div>
    </div>
  </div>
</div>
0
MrMaavin

<div class="top-buffer">のようにその行の間にdivを挿入してそれらの間にマージンを追加するだけで、CSSがここにあります.top-buffer { margin-top:10px; }うまくいくことを願っています。

0
Aitazaz Khan