0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[Rails] レイアウト下揃え

Posted at

##[bootstrap]レイアウト下揃え

環境
Rails 5.2.4.4
bootstrap3

やりたいこと
col-lg-8のテーブルの下に合わせて、col-lg-3のテーブルを配置

show.html.erb
	<div class="col-lg-8" style="position: relative;">
       <table class="table">
	   ...
       </table>
	</div>
		<div class="col-lg-3">
			<div class="absolute" style="position: absolute; bottom: 0;">
			  <table class="table">
			  ...
              </table>
		    </div>
		</div>

col-lg-8のテーブルの横にcol-lg-3のテーブルが来て下揃えになると勘違いしていた。
col-lg-3を"position:relative;"に変更して
col-lg-3の中で下揃えにしたら解決した。

show.html.erb
	<div class="col-lg-8">
       <table class="table">
	   ...
       </table>
	</div>
		<div class="col-lg-3" style="position: relative;">
			<div class="absolute" style="position: absolute; bottom: 0;">
			  <table class="table">
			  ...
              </table>
		    </div>
		</div>

ただの色々知識不足です。
勉強していきます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?