在引導程序中使用滾動窗格並覆蓋CSS

Question

我想使用滾動條來水平滾動到預測。

我已經更新了我的文件，並在我的css文件夾名稱bootstrap_and_customization.css下保存它：

@import 'bootstrap'; 
@import url(http://fonts.googleapis.com/css?family=Lato:400,700); 
#Forecast ul { 
float: left; 
width: 100%; 
padding: 0; 
margin: 0; 
list-style-type: none; 
white-space: nowrap; 
} 
#Forecast ul li div { 
float: left; 
text-decoration: none; 
color: white; 
background-color: purple; 
padding: 0.2em 0.6em; 
border-right: 1px solid white; 
white-space: nowrap; 
} 
#Forecast ul li a:hover { 
background-color: fuchsia; 
} 
#Forecast ul li { 
display: inline; 
/*width: 6em;*/ 
white-space: nowrap; 
} 
.border { 
border: 1px solid #00ced1; 
} 

我已經添加了white-space: nowrap;屬性，我的元素和代碼本身：

<asp:Panel ID="pForecast" ScrollBars="Horizontal" runat="server"> 
           <div id="Forecast" class="nowrap"> 
            <ul class="nowrap"> 
             <li class="nowrap"><a>current</a></li> 
             <li class="nowrap"><a>1h later</a></li> 
             <li class="nowrap"><a>2h later</a></li> 
             <li class="nowrap"><a>tomorrow</a></li> 
             <li class="nowrap"><a>tomorrow and later</a></li> 
             <li class="nowrap"><a>even later</a></li> 
            </ul> 
           </div> 
          </asp:Panel> 

爲class="nowrap"的標記：

.nowrap { 
white-space: nowrap; 
} 

當我運行代碼它看起來像這樣：

我也使用了bootsrap框架和相當多的其他樣式。是否有可能重置他們爲我的div Forecast並只使用我定義的樣式？

感謝您的幫助！

Answer 1

我使用的Rails開發我的網站引導，我遇到了，我需要一些覆蓋的那引導最初給我的風格類似的問題。爲此，我在我的assets/stylesheet文件夾內創建了一個bootstrap_and_customization.css.scss，並在那裏寫下我自己的css代碼。

例

@import 'bootstrap'; 
@import url(http://fonts.googleapis.com/css?family=Lato:400,700); 

$body-bg:             #ecf0f1; 
$font-family-sans-serif:    'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
$navbar-height:          45px; 
$navbar-default-bg:       white; 
$navbar-default-brand-color:  #c0392b; 
$brand-primary:         #c0392b; 
$jumbotron-bg:           white; 
$link-color: #e74c3c; 


.center { 
    text-align: center; 
} 

.navbar-brand { 
    font-weight: bold; 
}