在引导程序中使用Scrollpane并覆盖CSS

Question

I want to use a Scrollpane to horizontally scroll to a forecast.

I've updated my file and saved it under the name bootstrap_and_customization.css in my css folder:

@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;
}

I've already added the white-space: nowrap; attribute to my elements and to the code itself:

<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>

The markup for class="nowrap" :

.nowrap {
white-space: nowrap;
}

When I run the code it looks like this:

I'm also using the bootsrap framework and quite a lot other styles. Is it possible to reset them for my div Forecast and only use my defined style?

Thanks for any help!

Answer 1

I use Rails to develop my website with Bootstrap and I encountered a similar problem where I needed to overwrite some of the styles that Bootstrap originally gave me. To do that, I created a bootstrap_and_customization.css.scss within my assets/stylesheet folder and wrote there my own css code.

Example

@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;
}