Question

我正在尝试将包含各种其他内容类型的列表组合在一起：表格，面板等

问题是当我这样做时，列表项具有正确填充的所有内容等，但我在列表项内容下获得空格。你可以在下面看到它。我如何摆脱下面的空间？

＆＃13;

<!DOCTYPE html>
<html ng-app='myApp'>

<head>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style type="text/css">
    .bs-example {
      margin: 20px;
    }
    .input-xs {
      height: 22px;
      padding: 2px 5px;
      font-size: 12px;
      line-height: 1.5; //If Placeholder of the input is moved up, rem/modify this.
      border-radius: 3px;
    }
    .list-xs {
      height: 22px;
      padding: 2px 5px;
      font-size: 12px;
      line-height: 1.5; //If Placeholder of the input is moved up, rem/modify this.
      border-radius: 3px;
    }
    .row-xs {
      height: 22px;
      padding: 2px 5px;
      font-size: 12px;
      line-height: 1; //If Placeholder of the input is moved up, rem/modify this.
      border-radius: 3px;
    }
    .holder {
      padding: 2px 2px;
      line-height: 1.5;
      height: 1;
      clear: both;
    }
    table tr td {
      height: 22px !important;
      padding: 2px 5px !important;
      font-size: 12px !important;
    }
  </style>
</head>

<body ng-controller='FeedCtrl'>

  <div class="bs-example">

    <div class="col-xs-12 col-sm-8">
      <ul class="list-group list-xs">
        <li class="list-group-item list-xs">Some content here</li>

        <li class="list-group-item holder">
          <table class="table table-bordered">
            <tr>
              <td class="text-right">Article</td>
              <td><a href="#">Title of your article here</a>
              </td>
              <td class="text-right">-</td>
              <td class="text-right">$200.00</td>
              <td class="text-right">$200.00</td>
            </tr>
            <tr>
              <td>Template Design</td>
              <td><a href="#">Details of project here</a>
              </td>
              <td class="text-right">10</td>
              <td class="text-right">75.00</td>
              <td class="text-right">$750.00</td>
            </tr>
            <tr>
              <td>Development</td>
              <td><a href="#">WordPress Blogging theme</a>
              </td>
              <td class="text-right">5</td>
              <td class="text-right">50.00</td>
              <td class="text-right">$250.00</td>
            </tr>
          </table>
        </li>
        <li class="list-group-item list-xs">Some panel content below</li>
        <li class="list-group-item">
          <div class="panel panel-default">I am a panel</div>
        </li>
      </ul>
    </div>
  </div>

</body>

</html>

＆＃13;

Answer 1

您需要更改.list-group类，因为在引导程序中，默认的css list-group类有box-shadow，它会向您显示。

.list-group.list-xs {
   border-radius: 0;
   box-shadow:none;
}

list-group-item

1 个答案: