Question

我有这个代码，但是bootstrap忽略list_body div的一些代码，如margin-top。尝试使用!important，但它不起作用。

<div id="list_body">
    <input id="list_name" type="text">
    <input id="list_email" type="text">
</div>

CSS

div #list_body
{
    display: inline;
    margin-top: 0.5em;
}

完整的div代码

<div class="user_list">
    <div id="list_header">TEST
        <a href="#"><h4>*</h4></a>
    </div>
    <div id="list_body">
        <input id="list_name" type="text">
        <input id="list_email" type="text">
    </div>
</div>

完整的类和元素代码

div .user_list
{
    max-width: 40em;
    max-height: 30em;
    min-height: 10em;
    display: inline-block;
    margin-right: -1em;
    float: right;
    border: none;
}

div .user_list.active
{
    border: 1px solid black;
    border-radius: 3px;
}

div #list_header
{
    background-color: grey;
    height: 2em;
    border: 1px solid black;
    text-align: center;
}

div #list_header.active
{
    border: none;
    border-bottom: 1px solid black;
}

/*Show list*/
div #list_header a>h4
{
    display: inline;
}

div #list_body
{
    display: inline;
    margin-top: 0.5em !important;
}

（只是写它，因为stackoverflow要求更多细节，我不知道要添加什么）

更改bootstrap.css时，一切正常，但不是解决方案。

Answer 1

应该是display: block而不是display: inline

div #list_body
{
    display: block;
    margin-top: 0.5em;
}

Working Example

Bootstrap忽略样式

1 个答案: