asp.net - 网格中的边框显示

Question

我目前正在寻找以下现象的理由：

1. 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>
   

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

2. 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>

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

提前致谢。

最好的。

标签： asp.nettwitter-bootstrapasp.net-coreasp.net-mvc-4grid

Answer 1

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

注意：因此，我可能会使用空行来确保一定的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>