ヘッダーを横幅100%にして
□ □ □ □を右寄せ
Twitterを中央
ツイートのボタンを左寄せにしたいと考えています。
ですが現状headerが途中から始まってしまっている状態です。
また、現在Bootstrapで行おうとしてるのですがなかなかうまくいきません。
他に良い方法はございますでしょうか?
よろしくお願いいたします。
(bodyをoffsetしてるのでheaderもつられて途中から始まっているのでしょうか?)
index.html.erb
<div class="container_fluid"> <div class="row"> <header class="header"> <div class="flex_box"> <div class="col-md-5"> <p>□ □ □ □</p> </div> <div class="col-md-2"> <h2>Twitter</h2> </div> <div class="col-md-5"> <a href="/tweets/new" class="tweet_button">ツイート</a> </div> </div> </header> </div> <p><%= notice %></p> <div class="row"> <body class="col-md-offset-4 col-md-8"> <% @tweets.each do |tweet| %> <div class="tweet_header"> <p1> <%= tweet.name %> User_ID Time </p1> <p2> > </p2> </div> <p> <%= tweet.content %> </p> <tr> <td><%= link_to '詳細を確認する', tweet_path(tweet.id) %></td> <td><%= link_to "ツイートを編集する", edit_tweet_path(tweet.id) %></td> <td><%= link_to 'ツイートを削除する', tweet_path(tweet.id), method: :delete ,data: { confirm: '本当に削除していいですか?' } %></td> </tr> <% end %> </body> </div> </div>
twitter.scss
.header{ width: 100%; background-color: #7fffd4; } header ul li{ list-style-type: none; } body ul li{ list-style-type: none; } .flex_box{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-flow: nowrap; space-around: 3px; } a.tweet_button{ display: block; height: 30px; width: 120px; text-decoration: none; line-height: 33px; text-align: center; border-radius: 20px; color: #fff; -webkit-box-shadow: 1px 1px 1px #e9e9e9; -moz-box-shadow: 1px 1px 1px #e9e9e9; box-shadow: 1px 1px 1px #e9e9e9; background: #119de9; background: -webkit-gradient(linear, left top, left bottom, from(#119de9), to(#4bb8f3)); background: -moz-linear-gradient(top, #119de9, #4bb8f3); background: -o-linear-gradient(top, #119de9, #4bb8f3); background: -ms-linear-gradient(top, #119de9, #4bb8f3); background: linear-gradient(top, #119de9, #4bb8f3); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#119de9', endColorstr='#4bb8f3'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#119de9', endColorstr='#4bb8f3')"; } a.tweet_button:active{ /* クリックした時 */ -ms-transform: translateY(2px); -webkit-transform: translateY(2px); transform: translateY(2px); box-shadow: none; } .new_tweet{ margin-left: auto; margin-right: auto; font-weight: bold; background: #e0ffff; border: solid 1px #000000; border-radius: 20px; } .new_tweet div { width: auto; text-align: center; } .new_tweet_header{ background: #ffffff; border-radius: 20px; } .new_tweet_header h2 { width: auto; display :inline-block; } .new_tweet_boby { width: auto; }
よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー