Question

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4
    <ul class="list-group listDetail">
        <li class="list-group-item">Name<span class="pull-right">: </span></li>
        <li class="list-group-item">Address<span class="pull-right">: </span></li>
        <li class="list-group-item">Phone<span class="pull-right">: </span></li>
        <li class="list-group-item">Pet Name<span class="pull-right">: </span></li>

    </ul>
    </div>
    <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8
    <ul class="list-group listDetail">

        <li class="list-group-item">Pete</li>
        <li class="list-group-item">Zuma Deluxe Apartement</li>
        <li class="list-group-item">911</li>
        <li class="list-group-item">Foo Fighters</li>

    </ul>
    </div>
  </div>
</div>
    
</body>
</html>

我是初学者。所以今天我在模态中使用list-group和col-sm-4做了两个简单的col-sm-8，我只需要知道如何紧密地粘贴list-group，而不是像这样分开：

我搜索了list-group这样的家伙here，但他只使用了一个list-group，我仍然不知道如何解决这个问题。

这个菜鸟需要一个队长！

Answer 1

使用bootstrap，您可以在<div class="row"></div>中添加<div class="col-*">...</div>，就像这样，以达到您的需求：

请参阅： https://jsfiddle.net/Lindow/5z4nsesj/

以下是代码：

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>

  <body>

    <div class="container-fluid">
      <h1>Hello World!</h1>
      <p>Resize the browser window to see the effect.</p>
      <div class="row">
        <div class="col-sm-4" style="background-color:lavender;">
          <div class="row">.col-sm-4
            <ul class="list-group listDetail">
              <li class="list-group-item">Name<span class="pull-right">: </span></li>
              <li class="list-group-item">Address<span class="pull-right">: </span></li>
              <li class="list-group-item">Phone<span class="pull-right">: </span></li>
              <li class="list-group-item">Pet Name<span class="pull-right">: </span></li>

            </ul>
          </div>
        </div>
        <div class="col-sm-8" style="background-color:lavenderblush;">
          <div class="row">.col-sm-8
            <ul class="list-group listDetail">

              <li class="list-group-item">Pete</li>
              <li class="list-group-item">Zuma Deluxe Apartement</li>
              <li class="list-group-item">911</li>
              <li class="list-group-item">Foo Fighters</li>

            </ul>
          </div>
        </div>
      </div>
    </div>

  </body>

</html>

Answer 2

您可以使用自定义类填充右：0px;或填充左：0px

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.pad_right{padding-right:0px;}
.pad_left{padding-left:0px;}

</style>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-sm-4 pad_right" style="background-color:lavender;">.col-sm-4
    <ul class="list-group listDetail">
        <li class="list-group-item">Name<span class="pull-right">: </span></li>
        <li class="list-group-item">Address<span class="pull-right">: </span></li>
        <li class="list-group-item">Phone<span class="pull-right">: </span></li>
        <li class="list-group-item">Pet Name<span class="pull-right">: </span></li>

    </ul>
    </div>
    <div class="col-sm-8 pad_left" style="background-color:lavenderblush;">.col-sm-8
    <ul class="list-group listDetail">

        <li class="list-group-item">Pete</li>
        <li class="list-group-item">Zuma Deluxe Apartement</li>
        <li class="list-group-item">911</li>
        <li class="list-group-item">Foo Fighters</li>

    </ul>
    </div>
  </div>

＆＃13;

两个分开的列表组彼此接近[Bootstrap]

2 个答案: