无法设计搜索结果页面

debugcn 发表于 Dev

杰克

我是新手，想尝试学习，我需要将页面分为两部分，每部分显示一个产品列表，每个产品都有其描述。我编写了以下代码，但无法正常工作。

预期的输出将类似于Google结果页。页面中央的两个面板。就我而言，在每个面板上，我都会有一个员工列表以及他们的详细信息，如下所示

两个面板的输出

    Name:                                 Logo of Company
    Surname:                 Employee ID
    Phone:
   -------------------------------------------------------------
    Name:                                 Logo of Company
    Surname:                 Employee ID
    Phone:

引导带

<!DOCTYPE html>
<html lang="en">
<head>
  <title>List of Employees</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/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-md-2"></div>
    <div class="col-md-5" style="background-color:lavender;">
  <div class="col-md-2">
    <div class="row" style="background-color:green;">
         <div class="row">Name:</div>
         <div class="row">Surname:</div>
         <div class="row">Phone:</div>
      </div>
    <div class="row" style="background-color:yellow;">
         <div class="row">Name:</div>
         <div class="row">Surname:</div>
         <div class="row">Phone:</div>
      </div>
</div>
</div>
    <div class="col-md-5" style="background-color:lavenderblush;">.col-sm-4</div>
  <div class="col-md-2"></div>
  </div>
</div>

</body>
</html>

借助yuyokk的答案，我可以将代码更改为以下代码，但仍然不知道如何删除面板之间的空间。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>List of Employees</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>

  <div class="row">
    <div class="col-xs-6">
        <div style="margin-bottom:2px;text-align:left;background-color:green;">
          <div>Name: Name result <img style="float:right;" src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="40px" height="40px"/></div>

          <div>Surname: Surname result <div style="float:right;">Employee Id:122</div></div>
          <div>Phone: phone result</div>

        </div>
         <div style="margin-bottom:1px; background-color:red;">
          <div>Name: Name result</div>
          <div>Surname: Surname result</div>
          <div>Phone: phone result</div>
        </div>
    </div>
    <div class="col-xs-6">
        <div style="background-color:yellow;">
          <div>Name: Name result <img style="float:right" src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="40px" height="40px"/></div>

          <div>Surname: Surname result <div style="float:right;">Employee Id:133</div></div>
          <div>Phone: phone result</div>
        </div>
    </div>
  </div>
</div>


</body>
</html>

尤里

您使用错误的方式使用.row类的主要问题。你应该有

<div class="container-fluid">
  <div class="row">
     <div class="col-sm-6"></div> <!-- all your col classes have to be inside .row Basically row is a holder for col classes. No need yo use it everywhere -->
  </div>
</div>

这是一个示例http://plnkr.co/edit/HZPPeVEnDTDHSsACGjmI?p=preview

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。