如何在响应性质中拟合ul中的列表项？

Question

我有一个带有ul命令的div。我的列表组件正在削减一半。请帮忙！ 我使用Bootstrap 3。

#filters label{
    padding-left: 5px;
    margin-bottom: 25px;

}
#filters ul {
    margin-top: 25px;
    margin-bottom: 25px;
}
#filters li{
    border: 1px solid #5F5248;
    display: inline;
    padding: 10px;
    margin:20px 0px 10px 10px;
    background-color:rgba(255,255,255,0.3);

}

<div class="col-md-12 clearfix shadow " id="filters">
        <h4>You can change events according to categories</h4>
        <ul id="og-grid" class="col-md-12 list-unstyled og-grid box clearfix">
            <?php foreach ($event_category as $ec):?>
                <li class="filterblock box">
                    <input id="<?= $ec['id']?>" type="checkbox" value="<?= $ec['id']?>" class="category">
                    <label for="<?= $ec['id']?>"><?= $ec['name']?></label>
                </li>
            <?php endforeach; ?>
        </ul>
    </div>

This is snapshot for my code.I want red part to be in next line without using br

Answer 1

在display: inline-block上使用vertical-align: top和#filters li，您的问题就会得到解决。

#filters li {
    display: inline-block;
    vertical-align: top;
}

示例代码如下：

#filters label{
    padding-left: 5px;
    margin-bottom: 25px;

}
#filters ul {
    margin-top: 25px;
    margin-bottom: 25px;
}
#filters li{
    border: 1px solid #5F5248;
    display: inline-block;
    vertical-align: top;
    padding: 10px;
    margin: 10px 0px 10px 10px;
    background-color:rgba(255,255,255,0.3);

}

<div class="col-md-12 clearfix shadow " id="filters">
    <h4>You can change events according to categories</h4>
    <ul id="og-grid" class="col-md-12 list-unstyled og-grid box clearfix">
        <li class="filterblock box">
            <input id="check1" type="checkbox" class="category">
            <label for="check1">Label 1</label>
        </li>
        <li class="filterblock box">
            <input id="check2" type="checkbox" class="category">
            <label for="check2">Label 2</label>
        </li>
        <li class="filterblock box">
            <input id="check3" type="checkbox" class="category">
            <label for="check3">Label 3</label>
        </li>
        <li class="filterblock box">
            <input id="check4" type="checkbox" class="category">
            <label for="check4">Label 4</label>
        </li>
        <li class="filterblock box">
            <input id="check5" type="checkbox" class="category">
            <label for="check5">Label 5</label>
        </li>
        <li class="filterblock box">
            <input id="check6" type="checkbox" class="category">
            <label for="check6">Label 6</label>
        </li>
        <li class="filterblock box">
            <input id="check7" type="checkbox" class="category">
            <label for="check7">Label 7</label>
        </li>
        <li class="filterblock box">
            <input id="check8" type="checkbox" class="category">
            <label for="check8">Label 8</label>
        </li>
        <li class="filterblock box">
            <input id="check9" type="checkbox" class="category">
            <label for="check9">Label 9</label>
        </li>
        <li class="filterblock box">
            <input id="check10" type="checkbox" class="category">
            <label for="check10">Label 10</label>
        </li>
    </ul>
</div>