blocks|key|2104566|text|我想你可以设置左边的列是48%25的宽度，右边是48%25的宽度，中间是2%25的div，重复的背景。你必须自己处理它|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2104567|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I think you can set the left column is 48% width, right is 48% width and the center 2% div with repeated background. You must yourself handle it</p>


blocks|key|3740423|text|基于这个非常相似的答案：https://stackoverflow.com/a/11299934/1478467|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3740424|我建议从两个角度来解决这个问题:边框或行背景。这是demo+(jsfiddle)。|3740425|在背景选项的示例下面，唯一的缺点是，除非使用复杂的背景，否则无法真正控制线条的宽度。|3740426|<div+class="row+myBackground">
++++++++<div+class="span6">span6</div>
++++++++<div+class="span6">span6</div>
</div>|code-block|syntax|javascript|3740427|/*+Put+here+the+background+(color,+images,+etc.)+that+you+want+between+the+columns+*/
.row.myBackground+{+background:+#F00;+}
/*+This+is+the+column+background,+for+example+white+as+the+page+background+*/
.row.myBackground+>+[class*="span"]+{+background:+blue;+}|3740428|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/11299934/1478467|1|http://jsfiddle.net/Sherbrow/ypQQN/^0|C|18|0|0|P|F|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|F|3|G|5|6|7|16|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|17|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|J|7|18|8|@]|9|@]|C|$K|L]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]]]

<p>Based on that answer which is very similar : <a href="https://stackoverflow.com/a/11299934/1478467">https://stackoverflow.com/a/11299934/1478467</a></p>

<p>I would suggest 2 angles to attack this problem : borders or row background. Here is the <a href="http://jsfiddle.net/Sherbrow/ypQQN/" rel="nofollow noreferrer">demo (jsfiddle)</a>.</p>

<p>Below a sample for the background option, the only downside is that you don't really control the width of the line unless you use complex backgrounds.</p>

<pre class="lang-html prettyprint-override"><code>&lt;div class="row myBackground"&gt;
        &lt;div class="span6"&gt;span6&lt;/div&gt;
        &lt;div class="span6"&gt;span6&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<pre class="lang-css prettyprint-override"><code>/* Put here the background (color, images, etc.) that you want between the columns */
.row.myBackground { background: #F00; }
/* This is the column background, for example white as the page background */
.row.myBackground &gt; [class*="span"] { background: blue; }
</code></pre>


blocks|key|3830233|text|我想我答对你的问题了..。这是下面的代码。下面的内联样式只是为了说明。您可以在css文件中应用样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3830234|<div+class="container">
++++<div+class="row-fluid">
++++++++<div+class="span6"+style="padding-right:20px;+border-right:+1px+solid+#ccc;">
++++++++++++<p>Some+Contents+Here...</p>
++++++++</div>

++++++++<div+class="span6">
++++++++++++<p>Some+Contents+Here...</p>
++++++++</div>
++++</div>
</div>|code-block|syntax|javascript|3830235|上面的代码将输出this+image。|offset|length|3830236|​|3830237|📷|atomic|3830238|3830239|entityMap|0|LINK|mutability|MUTABLE|url|https://i.imgur.com/ZiJZU.png|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/72832c579f643159f7825ac2bf80f658.png|imageAlt^0|0|0|8|A|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@]|9|@$I|17|J|18|1|19]]|A|$]]|$1|K|3|L|5|6|7|1A|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|1B|8|@]|9|@$I|1C|J|1D|1|1E]]|A|$]]|$1|P|3|L|5|6|7|1F|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|Z|U|10|A|$11|12|13|-4]]]]

<p>I think I got your question right... this the below codes. The inline style below is just for illustration. You apply your styling in the css file.</p>

<pre><code>&lt;div class="container"&gt;
    &lt;div class="row-fluid"&gt;
        &lt;div class="span6" style="padding-right:20px; border-right: 1px solid #ccc;"&gt;
            &lt;p&gt;Some Contents Here...&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="span6"&gt;
            &lt;p&gt;Some Contents Here...&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The above code shall output <a href="https://i.imgur.com/ZiJZU.png" rel="noreferrer">this image</a>.</p>

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


blocks|key|2104835|text|我的解决方案使用:before伪元素在列之间放置一个定位的元素。这不需要更多的HTML元素，只会应用于.border-between类的直接子.col-*元素。这应该应用于与.row相同的元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2104836|HTML|BOLD|2104837|<div+class="row+border-between">
++<p+class="col-sm-6">This+column+does+not+have+a+border,+because+it's+a+first+child.</p>
++<p+class="col-sm-6">This+column+has+a+border+to+the+left</p>
</div>|code-block|syntax|javascript|2104838|CSS|2104839|.border-between+>+[class*='col-']:before+{
+++background:+#e3e3e3;
+++bottom:+0;
+++content:+"+";
+++left:+0;
+++position:+absolute;
+++width:+1px;
+++top:+0;
}

.border-between+>+[class*='col-']:first-child:before+{
+++display:+none;
}|2104840|entityMap^0|8|7|1F|F|1Z|6|2F|4|0|0|4|0|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@$9|13|A|14|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|15|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|16|8|@$9|17|A|18|B|H]]|D|@]|E|$]]|$1|P|3|Q|5|K|7|19|8|@]|D|@]|E|$L|M]]|$1|R|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|S|$]]

<p>My solution uses the <code>:before</code> pseudo-element to put a positioned element between the columns. This doesn't require any more HTML elements and will just be applied to immediate child <code>.col-*</code> elements of the <code>.border-between</code> class. This should be applied to the same element as the <code>.row</code>.</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="row border-between"&gt;
  &lt;p class="col-sm-6"&gt;This column does not have a border, because it's a first child.&lt;/p&gt;
  &lt;p class="col-sm-6"&gt;This column has a border to the left&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.border-between &gt; [class*='col-']:before {
   background: #e3e3e3;
   bottom: 0;
   content: " ";
   left: 0;
   position: absolute;
   width: 1px;
   top: 0;
}

.border-between &gt; [class*='col-']:first-child:before {
   display: none;
}
</code></pre>


blocks|key|3740541|text|基于@Ross+Angus解决方案，我找到了一种适应身高的方法。只是将每个列的边框放在彼此的顶部。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3740542|.grid--borderBetween+>+[class*='col-']:before,
.grid--borderBetween+>+[class*='col-']:after+{
++++background:+#b2b2b2;
++++bottom:+0;
++++content:+"+";
++++position:+absolute;
++++width:+1px;
++++top:+0;
}
.grid--borderBetween+>+[class*='col-']:before+{
++++left:+0;
}
.grid--borderBetween+>+[class*='col-']:after+{
++++right:+-1px;
}
.grid--borderBetween+>+[class*='col-']:first-child:before,
.grid--borderBetween+>+[class*='col-']:last-child:after+{
++++display:+none;
}|code-block|syntax|javascript|3740543|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>Based on @Ross Angus solution I found a way to adapt height. Just placing on top of each others borders of each columns.</p>

<pre><code>.grid--borderBetween &gt; [class*='col-']:before,
.grid--borderBetween &gt; [class*='col-']:after {
    background: #b2b2b2;
    bottom: 0;
    content: " ";
    position: absolute;
    width: 1px;
    top: 0;
}
.grid--borderBetween &gt; [class*='col-']:before {
    left: 0;
}
.grid--borderBetween &gt; [class*='col-']:after {
    right: -1px;
}
.grid--borderBetween &gt; [class*='col-']:first-child:before,
.grid--borderBetween &gt; [class*='col-']:last-child:after {
    display: none;
}
</code></pre>


blocks|key|2106506|text|在user2136179提供的CSS的基础上扩展，你也可以做下边框。它需要使用matchHeight，但可以让你的Bootstrap+grid看起来像一个表格网格。Check+it+out|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2106507|//+See+the+rest+on+codepen.io
$(".border-bottom").children("div").matchHeight();|code-block|syntax|javascript|2106508|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/anon/pen/GrdKYr^0|2A|C|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Expanding on the CSS provided by user2136179, you can also do bottom borders. It requires using matchHeight but can get your Bootstrap Grid looking like a table grid. <a href="http://codepen.io/anon/pen/GrdKYr" rel="nofollow noreferrer">Check it out</a></p>

<pre><code>// See the rest on codepen.io
$(".border-bottom").children("div").matchHeight();
</code></pre>


blocks|key|2104945|text|Bootstrap+4现在附带了border+utility+classes。因此，如果您使用的是Bootstrap+4，则可以在需要它们的列上使用这些类。例如，如果需要列A和列B之间的边框，则需要在列A上添加border-right类。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2104946|这是一个演示：|2104947|​|2104948|<link+rel="stylesheet"+href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"+integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"+crossorigin="anonymous">

<div+class="container">
++<div+class="row+text-center">
++++<div+class="col+border-right">
++++++Column+A
++++</div>
++++<div+class="col">
++++++Column+B
++++++<br>
++++++<br>
++++++<br>
++++++Additional+content+demonstrating+that+the+border+stretches+to+accommodate+the+height+of+both+columns.
++++</div>
++</div>
</div>|code-block|syntax|javascript|2104949|2104950|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/4.2/utilities/borders/^0|2X|C|G|M|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|14|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|15|8|@]|D|@]|E|$M|N]]|$1|O|3|I|5|6|7|16|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

<p>Bootstrap 4 now comes with <a href="https://getbootstrap.com/docs/4.2/utilities/borders/" rel="nofollow noreferrer">border utility classes</a>. So if you are using Bootstrap 4, you can just use these classes on the columns that need them. For example, If you want a border between column A and column B, you would add the <code>border-right</code> class on column A.</p>

<p>Here is a demo:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"&gt;

&lt;div class="container"&gt;
  &lt;div class="row text-center"&gt;
    &lt;div class="col border-right"&gt;
      Column A
    &lt;/div&gt;
    &lt;div class="col"&gt;
      Column B
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      Additional content demonstrating that the border stretches to accommodate the height of both columns.
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>Two column layout with a line in the middle. </p>

<pre><code>[                      ] | [                      ]
[                      ] | [                      ]
[                      ] | [                      ]
[     Left Column      ] | [    Right Column      ]
[                      ] | [                      ]
[                      ] | [                      ]
[                      ] | [                      ]
[                      ] | [                      ]
</code></pre>


How can I add a line between two columns using Twitter Bootstraps grid system

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

两列布局，中间有一条线。[                      ] | [                      ][                      ] | [                      ][                      ] | [                  ...

问如何使用Twitter Bootstraps网格系统在两列之间添加一行
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Twitter Bootstraps网格系统在两列之间添加一行EN