覆盖rails中的bootstrap断点

时间:2016-04-27 22:02:11

标签: ruby-on-rails twitter-bootstrap-3 sass

我正在使用sass-rails和bootstrap-sass宝石,我试图覆盖bootstrap中的断点。我想关闭所有屏幕的响应速度并将默认值设置为1200px。我尝试过一些方法,比如尝试使用appication.scss.css文件中的变量覆盖屏幕,但无济于事。

@import 'normalize';
@import "bootstrap-sprockets";
@import "bootstrap";

$screen-xs: 1200px;
$screen-sm: 1200px;
$screen-md: 1200px;
$screen-lg: 1200px;
$container-tablet:             (1200px + $grid-gutter-width) !default;
$container-sm:                 $container-tablet !default;
$container-desktop:            (1200px + $grid-gutter-width) !default;
$container-md:                 $container-desktop !default;
$container-large-desktop:      (1200px + $grid-gutter-width) !default;
$container-lg:                 $container-large-desktop !default;

$bgDefault      : #e6005c;
$bgHighlight    : #b30047;
$colDefault     : #ffffff;
$colHighlight   : #b8b8b8;
$fontSize       : 20px;
$dropDown       : false;

@font-face{
font-family: 'BebasNeue';
src: font-url('/assets/BebasNeue.otf');
}

.navbar-default {
background-color: $bgDefault;
border-color: $bgDefault;
border-radius: 0 !important;
.navbar-brand {
 color: $colDefault;
 &:hover, &:focus {
   color: $colHighlight; }}
.navbar-text {
 color: $colDefault; }
.navbar-nav {
 > li {
   > a {
     color: $colDefault;
     &:hover,  &:focus {
       color: $colHighlight; }}
   @if $dropDown {
     > .dropdown-menu {
       background-color: $bgDefault;
       > li {
         > a {
           color: $colDefault;
           &:hover,  &:focus {
             color: $colHighlight;
             background-color: $bgHighlight; }}
         > .divider {
           background-color: $bgHighlight;}}}}}
 @if $dropDown {
   .open .dropdown-menu > .active {
     > a, > a:hover, > a:focus {
       color: $colHighlight;
       background-color: $bgHighlight; }}}
 > .active {
   > a, > a:hover, > a:focus {
     color: $colHighlight;
     background-color: $bgHighlight; }}
 > .open {
   > a, > a:hover, > a:focus {
     color: $colHighlight;
     background-color: $bgHighlight; }}}
.navbar-toggle {
 border-color: $bgHighlight;
 &:hover, &:focus {
   background-color: $bgHighlight; }
 .icon-bar {
   background-color: $colDefault; }}
.navbar-collapse,
.navbar-form {
 border-color: $colDefault; }
.navbar-link {
 color: $colDefault;
 &:hover {
   color: $colHighlight; }}}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu {
 > li > a {
   color: $colDefault;
   &:hover, &:focus {
     color: $colHighlight; }}
 > .active {
   > a, > a:hover, > a:focus {
     color: $colHighlight;
     background-color: $bgHighlight; }}}
 }

 .navbar-header img {
 max-height: 100%;
 width: auto;
 }
 .navbar-brand {
 padding: 5px;
 }
 .navbar-nav  {
 font-family: 'BebasNeue', sans-serif;
 font-size: $fontSize;
 display:table;
 }
 .social img{
 padding-top: 5px;
 display: inline;
 height: 55px;
 }

 body {
 background-image: url("arrows25.png");
 background-repeat: repeat;
 }

 .navbar-form .input-group {
 width: 80%;
 }

 .navbar-form .input-group .input-group-addon,
 .navbar-form .input-group .input-group-btn {
   width: 1px;
 }


 .dropdown {
 display: inline;
 font-family: 'BebasNeue', sans-serif;
 font-size: $fontSize;
 float: right;
 color: #ffffff;
 }

 .dropdown a {
  float: left;
  text-decoration: none !important;
  color: #ffffff;
  border-color: $bgHighlight;
 }

 .divider {
 height: 1px;
 width:100%;
 display:block; /* for use on default inline elements like span */
 margin: 9px 0;
 overflow: hidden;
 background-color: $bgHighlight !important;
 }

 .dropdown-menu {
 padding: 0px;
 margin: 0px;
 background-color: $bgDefault;
 color: #ffffff;
 font-family: 'BebasNeue', sans-serif;
 font-size: $fontSize;
 }

 .dropdown-menu a{
 color: #FFFFFF !important;
 }

 .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
 background-color: $bgHighlight;
 width: 100%;
 }

.form-control:focus {
border-color: #b30047;
outline: 0;
}

0 个答案:

没有答案