0

我正在尝试制作一个列出不同专业的网格，类似于此，但不是 4 列，我想要 3 个... 类似于此的网格

到目前为止，我正在尝试使用它，但是填充确实关闭了，因为每个按钮都需要根据里面单词的大小来使用不同的填充。所以使用这段代码，输出看起来像这样......（ps。引导程序是链接的，所以没有问题）

<!doctype html>

<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>


<body style="background-color:white">
   <!-- heading -->
  <div class="container-fluid">
    <div class="tab">
      <div class="row">
        <div class="col">
      <button class="tablinks" onclick="openTab(event, 'Button1')">Accounting and Information Systems</button>
        </div>
        <div class="col">
      <button class="tablinks" onclick="openTab(event, 'Button2')">African Studies</button>
        </div>
        <div class="col">
      <button class="tablinks" onclick="openTab(event, 'Button3')">American Indian Studies</button>
        </div>
      </div>
      <div class="row">
        <div class="col">
      <button class="tablinks" onclick="openTab(event, 'Button1')">Anthropology</button>
        </div>
        <div class="col">
      <button class="tablinks" onclick="openTab(event, 'Button2')">Art</button>
        </div>
        <div class="col">
      <button class="tablinks" onclick="openTab(event, 'Button3')">Asian American Studies</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

上面提供的 HTML 的输出

4

4 回答 4

0

检查类的拼写<div clas="col">

您可能需要考虑使用html 表格，因为它专为您在这种情况下要执行的操作而设计，并且当您减小屏幕宽度时单元格不会换行。

于 2018-03-10T04:55:37.523 回答
0

尝试这个。我在标签中添加了一些 CSS 和button标签更改a。

.tab .col {
  background: #fff;
  border: 1px solid #ccc;
}
.tablinks {
  text-align: center;
  display: block;
  padding: 10px 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="tab">
<div class="row">
  <div class="col">
    <a class="tablinks" onclick="openTab(event, 'Button1')">Accounting and Information Systems</a>
  </div>
  <div class="col">
    <a class="tablinks" onclick="openTab(event, 'Button2')">African Studies</a>
  </div>
  <div class="col">
    <a class="tablinks" onclick="openTab(event, 'Button3')">American Indian Studies</a>
  </div>
</div>
<div class="row">
  <div class="col">
    <a class="tablinks" onclick="openTab(event, 'Button1')">Anthropology</a>
  </div>
  <div class="col">
    <a class="tablinks" onclick="openTab(event, 'Button2')">Art</a>
  </div>
  <div class="col">
    <a class="tablinks" onclick="openTab(event, 'Button3')">Asian American Studies</a>
  </div>
</div>

于 2018-03-10T05:14:34.427 回答
0

请在下面尝试HTML并CSS制作一个网格。您还可以为每一列添加填充和其他 CSS 样式，希望它会起作用。

HTML

  <div class="srow">
        <div class="scol">
         <button class="tablinks" onclick="openTab(event, 'Button2')">Accounting and Information Systems</button>
        </div>
        <div class="scol">
         <button class="tablinks" onclick="openTab(event, 'Button3')">African Studies</button>
        </div>
        <div class="scol">
        <button class="tablinks" onclick="openTab(event, 'Button1')">American Indian Studies</button>
        </div>
    </div>

    <div class="srow">
        <div class="scol">
         <button class="tablinks" onclick="openTab(event, 'Button2')">Anthropology</button>
        </div>
        <div class="scol">
         <button class="tablinks" onclick="openTab(event, 'Button3')">Art</button>
        </div>
        <div class="scol">
        <button class="tablinks" onclick="openTab(event, 'Button1')">Asian American Studies</button>
        </div>
    </div>

CSS

.srow{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 5px;
    width: 100%;
}

.scol{
-webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: block;
    padding: 5px;
    width: 100%;
}
于 2018-03-10T05:03:37.693 回答
0

您想要做的是使用表格，它最适合这种表格数据。它唯一的缺点是在手机上的响应能力，但你可以把它放在一个div中，设置为overflow-x隐藏在一定宽度，然后用户可以滑动/滚动查看所有数据。

  table tr td {
  margin: 0;
  padding: .25em;
    width: 25%;
    border: 1px solid #cccccc;
  }
  
  a {
  color: #2d2d2d;
  }
<table>
  <tr>
    <td><a href="#">Accounting and Information Systems</a></td>
    <td><a href="#">Civic and Community Engagement</a></td>
    <td><a href="#">Health Sciences</a></td>
    <td><a href="#">Physical Therapy</a></td>
  </tr>
</table>

于 2018-03-10T05:08:31.183 回答