-1

2列のリストを表示しようとしています。

左が奇数、右が偶数。

これが私が意味することです：

+----------------------------------------------------+
|                    col-md-9                        |
+------------------------+---------------------------+
|     1.                 |        2                  |
|     3.                 |        4.                 |
|     5.                 |        6.                 |
|     7.                 |        8.                 |
|     9.                 |       10.                 |
|                        |                           |
|                        |                           |
|                        |                           |
|                        |                           |
+------------------------+---------------------------+

私のコードは次のとおりです。

<div class="col-md-9">
   <ul>
      <li>1.</li>
      <li>2.</li>
      <li>3.</li>
      <li>4.</li>
      <li>5.</li>
      <li>6.</li>
      <li>7.</li>
      <li>8.</li>
      <li>9.</li>
      <li>10.</li>
   </ul>
</div>

どうすればそれを達成できますか？ps:リストを拡張するには、while() ループを使用します

4

2 に答える 2

0

全画面表示で確認してください。md を使用しているため、現在、各行に 1 li で表示されます。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-9">
  <ul class="row">
    <li class="col-md-6">1.</li>
    <li class="col-md-6">2.</li>
    <li class="col-md-6">3.</li>
    <li class="col-md-6">4.</li>
    <li class="col-md-6">5.</li>
    <li class="col-md-6">6.</li>
    <li class="col-md-6">7.</li>
    <li class="col-md-6">8.</li>
    <li class="col-md-6">9.</li>
    <li class="col-md-6">10.</li>
  </ul>
</div>

于 2016-01-01T11:34:07.970 に答える
0

私たちの間でブートストラップが嫌いな人のために：

<style>
    .ul-two-cols {
        display: block;
        width: 100%;
        listItemStyle: none;
        position: relative;
    }
    .ul-two-cols > li {
        display: inline-block;
        width: 49%;
    }
</style>
<div style="width: 300px;">
  <ul class="ul-two-cols">
    <li>1.</li>
    <li>2.</li>
    <li>3.</li>
    <li>4.</li>
    <li>5.</li>
    <li>6.</li>
    <li>7.</li>
    <li>8.</li>
    <li>9.</li>
    <li>10.</li>
  </ul>
</div>

于 2016-01-01T12:11:12.270 に答える