HTML начальной загрузки dl-Horizontal не работает, как ожидалось - PullRequest
Новая
       1

HTML начальной загрузки dl-Horizontal не работает, как ожидалось

0 голосов
/ 14 ноября 2018

Несмотря на то, что у меня внутри класса div "dl-horizontal", поля dl-горизонтальные находятся вне таблицы Код, который я использовал: 

<!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>

Чего мне не хватает в этом?Я пытаюсь получить "DL-горизонтальные" поля внутри таблицы событий EVENT и выше.любая помощь очень ценится.я пробовал столик внутри стола, но это не похоже на работу.

Ответы [ 2 ]

0 голосов
/ 14 ноября 2018

Вот это правильный подход: 

<!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>
0 голосов
/ 14 ноября 2018

Я думаю, что вам нужно разместить свой список описания с элементом таблицы, чтобы он был включен как часть таблицы. Этот фрагмент помещает его в тег заголовка: 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...