Question

尽管我在表中有div类“ dl-horizontal”，但dl-horizontal字段似乎在表外部我使用的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
		<table class="table table-condensed table-striped">
			<caption>Event <span class="badge">2</span></caption>
              <dl class="dl-horizontal">
                  <dt>field-1</dt><dd>14</dd>
                  <dt>field-2</dt><dd>13</dd>
                  <dt>field-3</dt><dd>12</dd>
              </dl>
				<tr>
					<th>Date</th>
					<th>Field5</th>
					<th>Field6</th>
					<th>Field7</th>
					<th>Field8</th>
					<th>Field9</th>
				</tr>
					<tr>
						<td class="text-nowrap">2018-11-13</td>
						<td>val2</td>
						<td>val2</td>
						<td>val4</td>
						<td>16</td>
						<td>val5</td>
					</tr>
		</table>

</body>
</html>

我在此缺少什么？我正在尝试获取EVENT内部和表值上方的“ dl-horizontal”字段。任何帮助是极大的赞赏。我尝试在桌子内放桌子，但这似乎不起作用。

Answer 1

我认为您需要在描述列表中放置一个表格元素，以使其包含在表格中。此代码段将其放置在标题标记内：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <table class="table table-condensed table-striped">
    <caption>Event <span class="badge">2</span>
      <dl class="dl-horizontal">
        <dt>field-1</dt>
        <dd>14</dd>
        <dt>field-2</dt>
        <dd>13</dd>
        <dt>field-3</dt>
        <dd>12</dd>
      </dl>
    </caption>
    <tr>
      <th>Date</th>
      <th>Field5</th>
      <th>Field6</th>
      <th>Field7</th>
      <th>Field8</th>
      <th>Field9</th>
    </tr>
    <tr>
      <td class="text-nowrap">2018-11-13</td>
      <td>val2</td>
      <td>val2</td>
      <td>val4</td>
      <td>16</td>
      <td>val5</td>
    </tr>
  </table>
  <hr>
  <table class="table table-condensed table-striped">
    <caption>Event <span class="badge">2</span>
    </caption>
    <tr>
      <td colspan="6">
        <dl class="dl-horizontal">
          <dt>field-1</dt>
          <dd>14</dd>
          <dt>field-2</dt>
          <dd>13</dd>
          <dt>field-3</dt>
          <dd>12</dd>
        </dl>

      </td>
    </tr>
    <tr>
      <th>Date</th>
      <th>Field5</th>
      <th>Field6</th>
      <th>Field7</th>
      <th>Field8</th>
      <th>Field9</th>
    </tr>
    <tr>
      <td class="text-nowrap">2018-11-13</td>
      <td>val2</td>
      <td>val2</td>
      <td>val4</td>
      <td>16</td>
      <td>val5</td>
    </tr>
  </table>

</body>

</html>

Answer 2

这是正确的方法：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
        <table class="table table-condensed table-striped">
            <caption>Event <span class="badge">2</span></caption>
              <tr><td colspan="6">
              <dl class="dl-horizontal">
                  <dt>field-1</dt><dd>14</dd>
                  <dt>field-2</dt><dd>13</dd>
                  <dt>field-3</dt><dd>12</dd>
              </dl>
              </td></tr>
                <tr>
                    <th>Date</th>
                    <th>Field5</th>
                    <th>Field6</th>
                    <th>Field7</th>
                    <th>Field8</th>
                    <th>Field9</th>
                </tr>
                    <tr>
                        <td class="text-nowrap">2018-11-13</td>
                        <td>val2</td>
                        <td>val2</td>
                        <td>val4</td>
                        <td>16</td>
                        <td>val5</td>
                    </tr>
        </table>

</body>
</html>

HTML引导程序dl水平无法正常工作

2 个答案: