blocks|key|323557|text|下面的例子似乎起作用了。只需设置第一个元素的高度|type|unstyled|depth|inlineStyleRanges|entityRanges|data|323558|<ul+class="row">
++++<li+class="span4"+style="height:+100px"><h1>1</h1></li>
++++<li+class="span4"><h1>2</h1></li>
++++<li+class="span4"><h1>3</h1></li>
++++<li+class="span4"><h1>4</h1></li>
++++<li+class="span4"><h1>5</h1></li>
++++<li+class="span4"><h1>6</h1></li>
++++<li+class="span4"><h1>7</h1></li>
++++<li+class="span4"><h1>8</h1></li>
</ul>|code-block|syntax|javascript|323559|不过，我不禁认为这是对行的错误使用。|323560|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>The example below seemed to work. Just setting a height on the first element</p>

<pre><code>&lt;ul class="row"&gt;
    &lt;li class="span4" style="height: 100px"&gt;&lt;h1&gt;1&lt;/h1&gt;&lt;/li&gt;
    &lt;li class="span4"&gt;&lt;h1&gt;2&lt;/h1&gt;&lt;/li&gt;
    &lt;li class="span4"&gt;&lt;h1&gt;3&lt;/h1&gt;&lt;/li&gt;
    &lt;li class="span4"&gt;&lt;h1&gt;4&lt;/h1&gt;&lt;/li&gt;
    &lt;li class="span4"&gt;&lt;h1&gt;5&lt;/h1&gt;&lt;/li&gt;
    &lt;li class="span4"&gt;&lt;h1&gt;6&lt;/h1&gt;&lt;/li&gt;
    &lt;li class="span4"&gt;&lt;h1&gt;7&lt;/h1&gt;&lt;/li&gt;
    &lt;li class="span4"&gt;&lt;h1&gt;8&lt;/h1&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I can't help but thinking it's the wrong use of a row though.</p>


blocks|key|106557|text|正如评论所建议的，解决方案是使用嵌套的跨度/行。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|106558|<div+class="container">
++++<div+class="row">
++++++++<div+class="span4">1</div>
++++++++<div+class="span8">
++++++++++++<div+class="row">
++++++++++++++++<div+class="span4">2</div>
++++++++++++++++<div+class="span4">3</div>
++++++++++++</div>
++++++++++++<div+class="row">
++++++++++++++++<div+class="span4">4</div>
++++++++++++++++<div+class="span4">5</div>
++++++++++++</div>
++++++++</div>
++++</div>
++++<div+class="row">
++++++++<div+class="span4">6</div>
++++++++<div+class="span4">7</div>
++++++++<div+class="span4">8</div>
++++</div>
</div>|code-block|syntax|javascript|106559|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Like the comments suggest, the solution is to use nested spans/rows.</p>

<pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
        &lt;div class="span4"&gt;1&lt;/div&gt;
        &lt;div class="span8"&gt;
            &lt;div class="row"&gt;
                &lt;div class="span4"&gt;2&lt;/div&gt;
                &lt;div class="span4"&gt;3&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row"&gt;
                &lt;div class="span4"&gt;4&lt;/div&gt;
                &lt;div class="span4"&gt;5&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
        &lt;div class="span4"&gt;6&lt;/div&gt;
        &lt;div class="span4"&gt;7&lt;/div&gt;
        &lt;div class="span4"&gt;8&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|106573|text|<div+class="row">
++<div+class="col-4+alert+alert-primary">
+++++1
++</div>
++<div+class="col-8">
++++<div+class="row">
++++++<div+class="col-6+alert+alert-primary">
++++++++2
++++++</div>
++++++<div+class="col-6+alert+alert-primary">
++++++++3
++++++</div>
++++++<div+class="col-6+alert+alert-primary">
++++++++4
++++++</div>
++++++<div+class="col-6+alert+alert-primary">
++++++++5
++++++</div>
++++</div>
++</div>
</div>
<div+class="row">
++<div+class="col-4+alert+alert-primary">
++++6
++</div>
++<div+class="col-4+alert+alert-primary">
++++7
++</div>
++<div+class="col-4+alert+alert-primary">
++++8
++</div>
</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|106574|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;div class="row"&gt;
  &lt;div class="col-4 alert alert-primary"&gt;
     1
  &lt;/div&gt;
  &lt;div class="col-8"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-6 alert alert-primary"&gt;
        2
      &lt;/div&gt;
      &lt;div class="col-6 alert alert-primary"&gt;
        3
      &lt;/div&gt;
      &lt;div class="col-6 alert alert-primary"&gt;
        4
      &lt;/div&gt;
      &lt;div class="col-6 alert alert-primary"&gt;
        5
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="row"&gt;
  &lt;div class="col-4 alert alert-primary"&gt;
    6
  &lt;/div&gt;
  &lt;div class="col-4 alert alert-primary"&gt;
    7
  &lt;/div&gt;
  &lt;div class="col-4 alert alert-primary"&gt;
    8
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>


<p>I'm trying to figure out how to do the following grid with Bootstrap. </p>

<p>I'm not sure how I'd create the box (number 1) that spans two rows. The boxes are generated programmatically in the order they are laid out. Box 1 is a welcome message.</p>

<p><img src="https://i.stack.imgur.com/P9sYM.jpg" alt="enter image description here"></p>

<p>Any ideas on the best way to go with this?</p>


How can I get a Bootstrap column to span multiple rows?

我正在尝试找出如何使用Bootstrap创建以下网格。我不确定如何创建跨越两行的框(1号)。这些框是按照布局顺序以编程方式生成的。框1是欢迎消息。​​有没有什么最好的方法呢？

问如何让Bootstrap列跨越多行？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让Bootstrap列跨越多行？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让Bootstrap列跨越多行？
EN