Bootstrap破坏了ul和li元素

Question

我正在制作一个简单的网络应用。今天，我决定加入bootstrap，使用一些UI元素。无论如何，包括bootstrap会破坏我自己开发的任何css。即使!important也无法解决问题。

包含Bootstrap css文件之前：

后：

怎么了？我该怎么办？

编辑：

之后，包括list-group和list-group-item类，我得到了：

所以，最后，我如何将文本与复选框放在同一行？

Answer 1

这是你应该在bootstrap中使用list的方法： -

DEMO

<ul class="list-group">
  <li class="list-group-item"><input type="checkbox"> Hi</li>
  <li class="list-group-item"><input type="checkbox"> How</li>
  <li class="list-group-item"><input type="checkbox"> Are</li>
  <li class="list-group-item"><input type="checkbox"> You</li>
</ul>

您需要应用bootstrap类来使用bootstrap实现新布局。

http://getbootstrap.com/components/#list-group

Answer 2

尝试将你的css合并到bootstrap采用的类名中。

Answer 3

此语法将确保您的复选框标签也可以点击：

<ul class="list-group">
    <li class="list-group-item">
        <div class="checkbox">
            <label><input type="checkbox" checked>Check me!</label>
        </div>
    </li>
    <li class="list-group-item">
        <div class="checkbox">
            <label><input type="checkbox" checked>Check me too!</label>
        </div>
    </li>
</ul>