网格中的边框显示答案

【问题标题】：Border disclosure in a grid网格中的边框显示
【发布时间】：2021-12-15 16:35:30
【问题描述】：

我目前正在寻找以下现象的原因：

ASP.NET

<div class="container-fluid">
       <div class="row">
               <div class="col-md-4" style="font-size:16px;>
               one column
               </div>
                <div class="col-md-4" style="font-size:16px;>
               two column
               </div>
                <div class="col-md-4" style="font-size:16px;>
               three column
               </div>
       </div>
<div>

根据上面的代码，可以看到每一列被一条竖线隔开。

ASP.NET (Core) MVC

迁移到MVC 框架后，类似的代码没有显示使用列分隔符的垂直线。

作为一种解决方法，我添加了一个CSS，同时将代码稍微修改为：

/* add column separator */
#divider .border {
border-right: 1px solid #ddd;
}


<div class="container-fluid" id = "divider" >
          <div class="row">
                  <div class="col-md-4 border" style="font-size:16px;>
                  one column
                  
                  <p> test</p>
                  </div>
                   <div class="col-md-4 border" style="font-size:16px;>
                  two column
                  <p> test2</p>
                  </div>
                   <div class="col-md-4 border" style="font-size:16px;>
                  three column
                  
                  </div>
           </div>
       </div>

鉴于在线搜索后也缺乏改进，因此我很想知道任何原因。

提前致谢。

最好的。

【问题讨论】：

到底是什么问题？有没有垂直线？ style="font-size:16px; 缺少结束 "
@VDWWD：感谢您的反馈。最初没有，我已经发布了自己的答案，如所述，这并不完美。很想知道是否存在更好的替代方案。

标签： asp.net twitter-bootstrap asp.net-core asp.net-mvc-4 grid

【解决方案1】：

下面的调整最终奏效了，尽管它并不完美，因为垂直线的height 与每个column 中使用的rows 的数量成正比。

注意：因此，我可能会使用空行来确保一定的symmetry，同时保持对更可靠的建议保持开放。

CSS

.border-right {
border-right: 1px solid #ddd;
}

ASP.NET（核心）MVC

<div class="container" >
          <div class="row">
                  <div class="col-md-4 border-right" style="font-size:16px;>
                  one column
                  
                  <p> test</p>
                  </div>
                   <div class="col-md-4 border-right" style="font-size:16px;>
                  two column
                  <p> test2</p>
                  </div>
                   <div class="col-md-4" style="font-size:16px;>
                  three column
                  
          </div>
</div>

【讨论】：