我正在使用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;
}