blocks|key|388966|text|如果您的代码如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|388967|<div+class="row">
++<div+class="span6">
++</div>
++<div+class="span6">
++</div>
</div>|code-block|syntax|javascript|388968|那么我假设你在"span6“DIVS中使用额外的DIVS来保存/样式化你的内容？所以..。|388969|<div+class="row">
++<div+class="span6">
++++<div+class="mycontent-left">
++++</div>
++</div>
++<div+class="span6">
++++<div+class="mycontent-right">
++++</div>
++</div>
</div>|388970|因此，您可以简单地向"mycontent-left“类添加一些CSS来创建您的分隔线。|388971|.mycontent-left+{
++border-right:+1px+dashed+#333;
}|388972|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>If your code looks like this:</p>

<pre><code>&lt;div class="row"&gt;
  &lt;div class="span6"&gt;
  &lt;/div&gt;
  &lt;div class="span6"&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Then I'd assume you're using additional DIVS within the "span6" DIVS for holding/styling your content? So...</p>

<pre><code>&lt;div class="row"&gt;
  &lt;div class="span6"&gt;
    &lt;div class="mycontent-left"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="span6"&gt;
    &lt;div class="mycontent-right"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>So you could simply add some CSS to the "mycontent-left" class to create your divider.</p>

<pre><code>.mycontent-left {
  border-right: 1px dashed #333;
}
</code></pre>


blocks|key|389164|text|在Bootstrap4中，有一个实用程序类border-right，您可以使用它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|389165|举个例子，你可以这样做：|389166|<div+class="row">
++<div+class="col-6+border-right"></div>
++<div+class="col-6"></div>
</div>|code-block|syntax|javascript|389167|entityMap^0|L|C|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>In Bootstrap 4 there is the utility class <code>border-right</code> which you can use.</p>

<p>So for example you can do:</p>

<pre><code>&lt;div class="row"&gt;
  &lt;div class="col-6 border-right"&gt;&lt;/div&gt;
  &lt;div class="col-6"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|170946|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|170947|.row.vertical-divider+{
++overflow:+hidden;
}
.row.vertical-divider+>+div[class%5E="col-"]+{
++text-align:+center;
++padding-bottom:+100px;
++margin-bottom:+-100px;
++border-left:+3px+solid+#F2F7F9;
++border-right:+3px+solid+#F2F7F9;
}
.row.vertical-divider+div[class%5E="col-"]:first-child+{
++border-left:+none;
}
.row.vertical-divider+div[class%5E="col-"]:last-child+{
++border-right:+none;
}|code-block|syntax|javascript|170948|<link+href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"+rel="stylesheet"+/>
<div+class="row+vertical-divider"+style="margin-top:+30px">
++<div+class="col-xs-6">Hi+there</div>
++<div+class="col-xs-6">Hi+world<br/>hi+world</div>
</div>|170949|170950|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.row.vertical-divider {
  overflow: hidden;
}
.row.vertical-divider &gt; div[class^="col-"] {
  text-align: center;
  padding-bottom: 100px;
  margin-bottom: -100px;
  border-left: 3px solid #F2F7F9;
  border-right: 3px solid #F2F7F9;
}
.row.vertical-divider div[class^="col-"]:first-child {
  border-left: none;
}
.row.vertical-divider div[class^="col-"]:last-child {
  border-right: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /&gt;
&lt;div class="row vertical-divider" style="margin-top: 30px"&gt;
  &lt;div class="col-xs-6"&gt;Hi there&lt;/div&gt;
  &lt;div class="col-xs-6"&gt;Hi world&lt;br/&gt;hi world&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|170960|text|若要修复分隔符在某一列的内容较高时太短的丑陋外观，请为所有列添加边框。每隔一列设置一个负边距，以补偿位置差异。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|170961|例如，我的三个列类：|170962|.border-right+{
++++border-right:+1px+solid+#ddd;
}
.borders+{
++++border-left:+1px+solid+#ddd;
++++border-right:+1px+solid+#ddd;
++++margin:+-1px;
}
.border-left+{
++++border-left:+1px+solid+#ddd;
}|code-block|syntax|javascript|170963|和HTML：|170964|<div+class="col-sm-4+border-right">First</div>
<div+class="col-sm-4+borders">Second</div>
<div+class="col-sm-4+border-left">Third</div>|170965|如果您想要与Bootstrap的水平分隔线颜色相同，请确保使用#ddd。|170966|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>To fix the ugly look of a divider being too short when the content of one column is taller, add borders to all columns. Give every other column a negative margin to compensate for position differences. </p>

<p>For example, my three column classes:</p>

<pre><code>.border-right {
    border-right: 1px solid #ddd;
}
.borders {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    margin: -1px;
}
.border-left {
    border-left: 1px solid #ddd;
}
</code></pre>

<p>And the HTML:</p>

<pre><code>&lt;div class="col-sm-4 border-right"&gt;First&lt;/div&gt;
&lt;div class="col-sm-4 borders"&gt;Second&lt;/div&gt;
&lt;div class="col-sm-4 border-left"&gt;Third&lt;/div&gt;
</code></pre>

<p>Make sure you use #ddd if you want the same color as Bootstrap's horizontal dividers. </p>


blocks|key|389187|text|如果你想要两列之间的垂直分隔符，你只需要添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|389188|class="col-6+border-left"+|code-block|syntax|javascript|389189|添加到其中一个列的div-s|389190|但|389191|在响应式设计的世界里，有时你可能需要让它消失。|389192|解决方案是消失<hr>+%2B消失<div>+%2B+margin-left:+-1px;|offset|length|style|CODE|389193|<div+class="container">
++<div+class="row">
++++<div+class="col-md-7">
++++++1+of+2
++++</div>
++++<div+class="border-left+d-sm-none+d-md-block"+style="width:+0px;"></div>
++++<div+class="col-md-5"+style="margin-left:+-1px;">
++++<hr+class="d-sm-block+d-md-none">
++++++2+of+2
++++</div>
++</div>
</div>|389194|https://jsfiddle.net/8z1pag7s/|389195|在Bootstrap+4.1上测试|389196|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|7|4|F|5|N|I|0|0|0|U|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|17|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|18|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|19|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1A|8|@$O|1B|P|1C|Q|R]|$O|1D|P|1E|Q|R]|$O|1F|P|1G|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|D|7|1H|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|1I|8|@]|9|@$O|1J|P|1K|1|1L]]|A|$]]|$1|W|3|X|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|V]]]]

<p>If you want a vertical divider between 2 columns, all you need is add </p>

<pre><code>class="col-6 border-left" 
</code></pre>

<p>to one of your column div-s</p>

<p>BUT</p>

<p>In the world of responsive design, you may need to make it disappear sometimes.</p>

<p>The solution is disappearing <code>&lt;hr&gt;</code> + disappearing <code>&lt;div&gt;</code> + <code>margin-left: -1px;</code></p>

<pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-md-7"&gt;
      1 of 2
    &lt;/div&gt;
    &lt;div class="border-left d-sm-none d-md-block" style="width: 0px;"&gt;&lt;/div&gt;
    &lt;div class="col-md-5" style="margin-left: -1px;"&gt;
    &lt;hr class="d-sm-block d-md-none"&gt;
      2 of 2
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><a href="https://jsfiddle.net/8z1pag7s/" rel="noreferrer">https://jsfiddle.net/8z1pag7s/</a></p>

<p>tested on Bootstrap 4.1</p>


blocks|key|170968|text|我已经测试过了。它工作得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|170969|.row.vdivide+[class*='col-']:not(:last-child):after+{
++++++background:+#e0e0e0;
++++++width:+1px;
++++++content:+"";
++++++display:block;
++++++position:+absolute;
++++++top:0;
++++++bottom:+0;
++++++right:+0;
++++++min-height:+70px;
++++}

++++<div+class="container">
++++++<div+class="row+vdivide">
++++++++<div+class="col-sm-3+text-center"><h1>One</h1></div>
++++++++<div+class="col-sm-3+text-center"><h1>Two</h1></div>
++++++++<div+class="col-sm-3+text-center"><h1>Three</h1></div>
++++++++<div+class="col-sm-3+text-center"><h1>Four</h1></div>
++++++</div>
++++</div>|code-block|syntax|javascript|170970|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>I have tested it. It works fine.</p>

<pre><code>.row.vdivide [class*='col-']:not(:last-child):after {
      background: #e0e0e0;
      width: 1px;
      content: "";
      display:block;
      position: absolute;
      top:0;
      bottom: 0;
      right: 0;
      min-height: 70px;
    }

    &lt;div class="container"&gt;
      &lt;div class="row vdivide"&gt;
        &lt;div class="col-sm-3 text-center"&gt;&lt;h1&gt;One&lt;/h1&gt;&lt;/div&gt;
        &lt;div class="col-sm-3 text-center"&gt;&lt;h1&gt;Two&lt;/h1&gt;&lt;/div&gt;
        &lt;div class="col-sm-3 text-center"&gt;&lt;h1&gt;Three&lt;/h1&gt;&lt;/div&gt;
        &lt;div class="col-sm-3 text-center"&gt;&lt;h1&gt;Four&lt;/h1&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
</code></pre>


blocks|key|389111|text|必须在全页中打开才能看到边框！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|389112|在CSS中添加了媒体宽度条款，因此在移动友好的方面没有任何令人讨厌的边界。希望这能有所帮助！这将调整到最长列的长度。在.col-md-4和.col-md-6上进行了测试，我的假设是它与其他版本兼容。然而，不能保证。|389113|JSFiddle|offset|length|389114|​|389115|.row+{
++overflow:+hidden;
}

.cols+{
++padding-bottom:+100%25;
++margin-bottom:+-100%25;
++overflow:+hidden;
}

@media(min-width:+992px)+{
++.col-md-4:not(:first-child),+
++.col-md-6:not(:first-child)+{
++++border-left:+1px+solid+black;
++}
++.col-md-4:not(:last-child),
++.col-md-6:not(:last-child)+{
++++border-right:+1px+solid+black;
++++margin-right:+-1px;
++}
}|code-block|syntax|javascript|389116|<link+href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"+rel="stylesheet"/>
<div+class="container">
++<h1>
++++.col-md-6
++</h1>
++<hr>
++<div+class="row+text-center">
++++<div+class="col-md-6+cols">
++++++<p>Enter+some+text+here</p>
++++</div>
++++<div+class="col-md-6+cols">
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++</div>
++</div>
++<hr>
++<h1>
++++.col-md-4
++</h1>
++<div+class="row+text-center">
++++<div+class="col-md-4+cols">
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++</div>
++++<div+class="col-md-4+cols">
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++</div>
++++<div+class="cols+col-md-4+cols">
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++++<p>Enter+some+more+text+here</p>
++++</div>
++</div>
</div>|389117|389118|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/mzack5020/ooxn0vsr^0|0|0|0|8|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@$F|12|G|13|1|14]]|A|$]]|$1|H|3|I|5|6|7|15|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|16|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|L|7|17|8|@]|9|@]|A|$M|N]]|$1|Q|3|I|5|6|7|18|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

<h2>Must Open in Full Page to See Borders!</h2>

<p>Added media width clauses in the CSS so there isn't any nasty borders on the mobile-friendly side of things. Hope this helps! This will resize to the length of the longest column. Tested on .col-md-4 and .col-md-6 and my assumption is it is compatible with the rest. No guarantees though.</p>

<p><a href="https://jsfiddle.net/mzack5020/ooxn0vsr" rel="nofollow noreferrer">JSFiddle</a></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-css lang-css prettyprint-override"><code>.row {
  overflow: hidden;
}

.cols {
  padding-bottom: 100%;
  margin-bottom: -100%;
  overflow: hidden;
}

@media(min-width: 992px) {
  .col-md-4:not(:first-child), 
  .col-md-6:not(:first-child) {
    border-left: 1px solid black;
  }
  .col-md-4:not(:last-child),
  .col-md-6:not(:last-child) {
    border-right: 1px solid black;
    margin-right: -1px;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
&lt;div class="container"&gt;
  &lt;h1&gt;
    .col-md-6
  &lt;/h1&gt;
  &lt;hr&gt;
  &lt;div class="row text-center"&gt;
    &lt;div class="col-md-6 cols"&gt;
      &lt;p&gt;Enter some text here&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="col-md-6 cols"&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;hr&gt;
  &lt;h1&gt;
    .col-md-4
  &lt;/h1&gt;
  &lt;div class="row text-center"&gt;
    &lt;div class="col-md-4 cols"&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4 cols"&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="cols col-md-4 cols"&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
      &lt;p&gt;Enter some more text here&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|389148|text|假设您有一个列空间，这是一个选择。根据需要重新平衡各列。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|389149|<div+class="col-1">
++++<div+class="col-6+vhr">
++++</div>
</div>|code-block|syntax|javascript|389150|.vhr{
++border-right:+1px+solid+#333;
++height:100%25;
}|389151|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|D|7|M|8|@]|9|@]|A|$E|F]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Assuming you have a column space, this is an option. Rebalance the columns depending on what you need.</p>

<pre><code>&lt;div class="col-1"&gt;
    &lt;div class="col-6 vhr"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<pre class="lang-css prettyprint-override"><code>.vhr{
  border-right: 1px solid #333;
  height:100%;
}
</code></pre>


blocks|key|389008|text|我所做的是移除各个跨度之间的间距，然后为左跨度绘制一个左边界，为右跨度绘制一个右边界，使得它们的边界重叠在一起，只给出一条线。这样，可见的线条将只是一个边框。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|389009|CSS|389010|.leftspan
{
padding-right:20px;
border-right:+1px+solid+#ccc;
}

.row-fluid+.rightspan+{
margin-left:+-0.138297872340425%25;
*margin-left:+-0.13191489361702%25;
padding-left:20px;
border-left:+1px+solid+#ccc;
}

.row-fluid+.rightspan:first-child+{
margin-left:+-0.11063829787234%25;
*margin-left:+-0.104255319148938%25;
}|code-block|syntax|javascript|389011|HTML|389012|++<div+class="row-fluid"+>
++++++<div+class="span8+leftspan"+>
++++++</div>

++++++<div+class="span4+rightspan"++>
++++++</div>
+</div>|389013|试试这个，它对我很管用|389014|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Well what I did was remove the gutter between the respective spans then drawing a left border for the left span and a right border for the right span in such a way that their borders overlapped just to give a single line. This way the visible line will just be one of borders.</p>

<p>CSS </p>

<pre><code>.leftspan
{
padding-right:20px;
border-right: 1px solid #ccc;
}

.row-fluid .rightspan {
margin-left: -0.138297872340425%;
*margin-left: -0.13191489361702%;
padding-left:20px;
border-left: 1px solid #ccc;
}

.row-fluid .rightspan:first-child {
margin-left: -0.11063829787234%;
*margin-left: -0.104255319148938%;
}
</code></pre>

<p>HTML</p>

<pre><code>  &lt;div class="row-fluid" &gt;
      &lt;div class="span8 leftspan" &gt;
      &lt;/div&gt;

      &lt;div class="span4 rightspan"  &gt;
      &lt;/div&gt;
 &lt;/div&gt;
</code></pre>

<p>Try this it works for me</p>


blocks|key|389211|text|从bootstrap+v4开始，您可以使用以下代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|389212|+<div+class="row">
+++<div+class="col-6+span6+border-right">
++++++dummy+content
+++</div>
+++<div+class="col-6+span6">
++++++right+div+content
+++</div>
+</div>|code-block|syntax|javascript|389213|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>As of bootstrap v4 you can use this code</p>
<pre><code> &lt;div class=&quot;row&quot;&gt;
   &lt;div class=&quot;col-6 span6 border-right&quot;&gt;
      dummy content
   &lt;/div&gt;
   &lt;div class=&quot;col-6 span6&quot;&gt;
      right div content
   &lt;/div&gt;
 &lt;/div&gt;
</code></pre>


blocks|key|389236|text|Bootstrap+V5引入了放置在<div>元素上的.vr+class。如果需要，可以将其放在<li>元素中以分隔<ul>元素中的元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|389237|<ul+class="navbar-nav">
++<li>Element+1</li>
++<li>
++++<div+class="h-100+vr"></div>
++</li>
++<li>Element+2</li>
</ul>|code-block|syntax|javascript|389238|注意：.navbar-nav类与navbars相关，它将所有子元素的css属性list-style设置为none，这是包装<li>元素正确显示垂直规则(分隔符)所必需的。|389239|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/5.1/helpers/vertical-rule/|1|https://getbootstrap.com/docs/5.1/components/navbar/^0|I|5|R|3|1C|4|1M|4|V|5|0|0|0|3|B|13|A|1G|4|1P|4|G|7|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]]|E|$]]|$1|F|3|G|5|H|7|18|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|M|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]]]

<p>Bootstrap V5 introduced the <code>.vr</code> <a href="https://getbootstrap.com/docs/5.1/helpers/vertical-rule/" rel="nofollow noreferrer">class</a> you place on a <code>&lt;div&gt;</code> element.
If needed, place it inside an <code>&lt;li&gt;</code> element to separate elements inside <code>&lt;ul&gt;</code>element.</p>
<pre><code>&lt;ul class=&quot;navbar-nav&quot;&gt;
  &lt;li&gt;Element 1&lt;/li&gt;
  &lt;li&gt;
    &lt;div class=&quot;h-100 vr&quot;&gt;&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;Element 2&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<p>Note : <code>.navbar-nav</code> class is related to <a href="https://getbootstrap.com/docs/5.1/components/navbar/" rel="nofollow noreferrer">navbars</a> and sets the css property <code>list-style</code> of all children elements to <code>none</code> which is required for the wrapping <code>&lt;li&gt;</code> element to display the vertical rule (separator) correctly.</p>


blocks|key|389043|text|使用这个，100%25保证：-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|389044|vr+{
++margin-left:+20px;
++margin-right:+20px;
++height:+50px;
++border:+0;
++border-left:+1px+solid+#cccccc;
++display:+inline-block;
++vertical-align:+bottom;
}|code-block|syntax|javascript|389045|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>Use this, 100% guaranteed:-</p>

<pre><code>vr {
  margin-left: 20px;
  margin-right: 20px;
  height: 50px;
  border: 0;
  border-left: 1px solid #cccccc;
  display: inline-block;
  vertical-align: bottom;
}
</code></pre>


<p>I am using twitter bootstrap, and have a row which has two columns (span6). How do I create a vertical divider between both the spans. </p>

<p>Thanks,
Murtaza </p>


vertical divider between two columns in bootstrap

响应式设计

我正在使用twitter bootstrap，并且有一个有两列的行(span6)。如何在两个跨度之间创建垂直分隔线。谢谢，Murtaza

问引导程序中两列之间的垂直分隔符
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导程序中两列之间的垂直分隔符EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导程序中两列之间的垂直分隔符
EN