html - 制作内部列表项以填充 Bootstrap 中的父列表项

Question

我想通过强制内部列表项填充其父列表项来消除以下嵌套列表项中的边距。参见 JSFiddle:

<div class="container">
 <div class="panel panel-default">
   <div class="panel-heading">
     This is the heading
   </div>
   <div class="panel-body">
     <ul class="list-group parentList">
       <li class="list-group-item">
         Hello
       </li>
       <li class="list-group-item  nomargin">
         <ul class="list-group childList">
           <li class="list-group-item  nomargin">
             Hello.Child 1
           </li>
           <li class="list-group-item child">
             Hello.Child 2
           </li>
         </ul>
       </li>
     </ul>
   </div>
 </div>

这是CSS:

.nomargin {
  margin-left: 0px !important;
  margin-right: 0px !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important
 }

.parentList {
  display: inline-block;
  position: relative;
}

.childList {
  width: 100%;
 }

Answer 1

这些空格是由padding引起的，所以需要添加padding: 0 not margin

Demo