부트 스트랩에서 스크롤 판을 사용하고 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; 
} 

,536,

코드를 실행하면 다음과 같이 보입니다.

나는 또한 bootsrap 프레임 워크와 꽤 많은 다른 스타일을 사용하고 있습니다. 내 div Forecast에 대해 재설정 할 수 있으며 정의 된 스타일 만 사용합니까?

도움 주셔서 감사합니다.

Answer 1

나는 부트 스트랩내 웹 사이트를 개발하기 위해 레일을 사용하고 난 부트 스트랩 원래 준 스타일의 일부를 덮어 쓸 필요가 비슷한 문제가 발생했습니다. 그렇게하기 위해, 내 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; 
}