Question

我将col-sm-4 Bootstrap类应用于jQuery滑块（lightslider）组件内的一些列表元素。

当屏幕介于801px和991px之间时，我希望list元素增加到160px，因为目前它太小而且数据被压扁了一点。

在Chrome开发者工具中，样式应用于以下css：

element.style {
    width: 142px;
    margin-right: 10px;
}

这是我的HTML：

<ul id="responsive" >
    @foreach (var item in Model.Categories)
    {
        <li id="list-size-increase" class="col-sm-4 align-centre list-size-increase">
            <a href="@Url.Action("Products", "Home", new { id = item.Id, categoryName = item.Name })">

                <img src="@item.OutputImage" alt="@item.Image" />

                <div class="blend-box-top category-head" style="background: #0197BA url(@item.OutputImage) no-repeat 50% 0%;">
                    <div class="item-container">

                        <div class="desc-plus">
                            <p>@item.Name</p>
                            <p>+</p>
                        </div>
                    </div>
                </div>

            </a>
        </li>
    }
</ul>

我尝试过这个id类，但我没有看到任何变化：

@media (min-width: 801px) and (max-width: 991){
   .list-size-increase{
        width:160px;
   }
}

Answer 1

这解决了它：

@media (min-width: 801px) and (max-width: 991px){
    .list-size-increase {
        width: 160px !important;
    }
}

!important关键字允许新样式优先于内联样式。哦，我多么喜欢记忆和学习。

如何更改已应用Bootstrap样式的元素的宽度

1 个答案: