Question

我正在尝试创建一个如下图所示的表格。

我正在使用bootstrap。这是一个例子：

<nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" style="margin-left: 20px;">123 Main Street - Big Blue</a>
      </div>
      <ul class="nav navbar-nav navbar-right">
        <p style="margin-right: 50px;">
          June 07, 2018 <br />
          57 F
        </p>
      </ul>
    </div>
  </nav>

  <div class="container">

    <div class="row">

            <div class="col-sm-4" style="background-color:lavender;">
          Dawn Rabideau 2-100
          <br />
          Lonnie Robinson (Pinoy Arts) T-100
          <br />
          Pro Wrestling Hall of Fame A-101
          <br />
          Michael Chapman T-101
          <br />
          Ted Klopf 2-717
          <br />
          Harvest Ministries T-1100 Suite
          <br />
           Ricci Consulting, LLC T-608
          <br />
          North Texas Home Therapy Professionals T-500B
          <br />
          Terry Thompson T-623
          <br />
          Substance Abuse Testing Solutions T-830
          <br />

            </div>

            <div class="col-sm-4" style="background-color:lavender;">
          Melons and Cuties T-104
          <br />
          Amy Janjgava 2-701
          <br />
          Dexter Learning T-200
          <br />
          Mary Amanda Beaver Counseling Services T-825
          <br />
          Marsha Wright Reeves T-610
          <br />
          Nosidrah Enterprises T-500A
          <br />
          B Strong Consulting DBA Court on Blue T-105
          <br />
          Marshall Hall T-532
          <br />
          American Financial Network, Inc T-102
          <br />
          The EDI Exchange T-600
          <br />

        </div>

    </div>
  </div>

我不善于使用CSS。如何使行内的2列与图片更相似？我的导航顶部栏也没有很好的格式。有没有办法格式化顶部导航菜单？

由于

Answer 1

如果您使用的是自举程序，则可以在页面上点击bootstrap grid system以获取自适应网格。

＆＃13;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg" style="background: url('https://mdbootstrap.com/img/Photos/Others/background.jpg')">
      <a class="navbar-brand" href="#">123 Main Street - Big Blue</a>
      <div>
       <span class="navbar-text">
           June 07, 2018 <br />
           57 F
       </span>
   </div>
</nav>    
<div class="container-flex">
  <div class="row">
    <div class="col-sm-6 col-md-6">
      <div class="row">
        <div class="col-sm-8 col-md-8">
          Alambic Invesment Management
        </div>
        <div class="col-sm-4 col-md-4">
          1905
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-6">
      <div class="row">
        <div class="col-sm-8 col-md-8">
          MWA Architects
        </div>
        <div class="col-sm-4 col-md-4">
          1720
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

要格式化navbar，您始终可以使用css。

顶部菜单和表格的CSS帮助，包含2列

1 个答案: