css - How to make header align with bootstrap columns? -
how can make layouts/header align col-md-9 & col-md-3 "p" in personal control center aligned panel below , downward arrow aligned right edge of sidebar?
i able via padding in first picture, i'd align regardless of screen size. can see decreased width of browser becomes less aligned.
*in last case downward arrow should align right edge of panel.
application.html.erb
<!doctype html> <html> <head> <title>personal control center</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- tells app mobile responsive --> </head> <body> <%= render 'layouts/header' %> <% flash.each |name, msg| %> <%= content_tag(:div, msg, class: "alert alert-info") %> <% end %> <div class="container-fluid"> <div class="container"> <div class="col-md-9"> <%= yield %> </div> <div class="col-md-3"> <% if current_user.present? %> <%= render 'layouts/sidebar' %> <% end %> </div> </div> </div> </body> </html> bootstrap_customization.css.scss
@import url(http://fonts.googleapis.com/css?family=lato:400,700); $body-bg: #2c3e50; $font-family-sans-serif: 'lato', 'helvetica neue', helvetica, arial, sans-serif; $navbar-height: 45px; $navbar-default-bg: white; $navbar-default-brand-color: #a73a31; $brand-primary: #000; $jumbotron-bg: #ffffff; @import 'bootstrap-sprockets'; @import 'bootstrap'; /* link */ .navbar-default .navbar-nav > li > { color: #2e2e2e; } .panel-default > .panel-heading { background-color: #2e2e2e; color: white; border: none; } .panel { border: none; } #sidebarheadingtop { padding-top: .1em; border: none; border-radius: 0px; background-color: #2e2e2e; color: #ecf0f1; padding-bottom: 3px; } #sidebarheading { padding-top: .1em; border-radius: 0px; border: none; background-color: #2e2e2e; color: #ecf0f1; padding-bottom: 3px; } #sidebarsectiontop { margin-top: 0px; margin-bottom: 0px; border-bottom-right-radius: 0em 0em; border-bottom-left-radius: 0em 0em; border-style: none; } #sidebarsection { margin-top: 0px; margin-bottom: 0px; border-radius: 0px; border-style: none; } #sidebarsectionbottom { margin-top: 0px; margin-bottom: 0px; border-top-radius: 0px; border-style: none; } .nav-container { margin: 0 auto; padding-left: 8em; padding-right: 8em; } .container { margin: 0 auto; padding-left: 3em; padding-right: 3em; } .center { text-align: center; } .navbar-brand { font-weight: bold; } { &:hover { color: #666; text-decoration: none; } } if change application code this:
<div class="container-fluid"> <div class="container"> <%= render 'layouts/header' %> <% flash.each |name, msg| %> <%= content_tag(:div, msg, class: "alert alert-info") %> <% end %> <!-- rest of code here --> </div> </div>i this:
thank time!
taking blindly guess, think wrapping this:
<%= render 'layouts/header' %> <% flash.each |name, msg| %> <%= content_tag(:div, msg, class: "alert alert-info") %> <% end %> inside of .container job:
<div class="container-fluid"> <div class="container"> <%= render 'layouts/header' %> <% flash.each |name, msg| %> <%= content_tag(:div, msg, class: "alert alert-info") %> <% end %> <!-- rest of code here --> </div> </div> ==== update ====
find .container width , give same width header wrapper , margin: 0 auto;. header must have wrapper i'm gonna create 1 here understand:
<body> <div class="headerwrapper"> <%= render 'layouts/header' %> <% flash.each |name, msg| %> <%= content_tag(:div, msg, class: "alert alert-info") %> <% end %> </div> <div class="container-fluid"> <div class="container"> <div class="col-md-9"> <%= yield %> </div> <div class="col-md-3"> <% if current_user.present? %> <%= render 'layouts/sidebar' %> <% end %> </div> </div> </div> </body> this goes css file:
.headerwrapper { width: 1200px; /* width size example, value goes here same of body width */ margin: 0 auto; } here's online example
Comments
Post a Comment