html - 在 bootstrap 中使用 Scrollpane 并覆盖 CSS

Question

我想使用 Scrollpane 水平滚动到预测。

我已经更新了我的文件，并将其保存在我的 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 通过 Bootstrap 开发我的网站，我遇到了一个类似的问题，我需要覆盖 Bootstrap 最初给我的一些样式。为此，我在我的 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;
}