Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/41.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 在带檐槽的引导3个网格列上创建底部边框_Css - Fatal编程技术网

Css 在带檐槽的引导3个网格列上创建底部边框

Css 在带檐槽的引导3个网格列上创建底部边框,css,Css,我一直在尝试使用Bootstrap3建立一个网格,在这个网格中,即使内容大小不同,所有列的高度也是相同的——这是我使用flexbox完成的。但现在我试图在网格中的每个项目的底部添加一个实心边框,但我无法使其工作(我希望底部有一个边框,网格元素之间有一个排水沟) 我可以在顶部轻松完成,如: 但当我在按钮上尝试时,我得到的结果如下: 如果我直接在列div上尝试,我会得到一个实心条。所以-我基本上需要在列之间设置一个排水沟,或者设置一个嵌套的div,使其达到全高。我尝试过很多解决方案(各种填充

我一直在尝试使用Bootstrap3建立一个网格,在这个网格中,即使内容大小不同,所有列的高度也是相同的——这是我使用flexbox完成的。但现在我试图在网格中的每个项目的底部添加一个实心边框,但我无法使其工作(我希望底部有一个边框,网格元素之间有一个排水沟)

我可以在顶部轻松完成,如:


但当我在按钮上尝试时,我得到的结果如下:


如果我直接在列div上尝试,我会得到一个实心条。所以-我基本上需要在列之间设置一个排水沟,或者设置一个嵌套的div,使其达到全高。我尝试过很多解决方案(各种填充技巧、vh等),它们要么不起作用,要么破坏响应能力

更重要的是,这是在CMS中,我无法访问css或js文件,所以我所做的一切都必须在html主体的一部分内联工作


对攻击途径有什么建议吗?

对每个内联样式应用100%的高度

    <div class="container-fluid">
      <div class="row" style="display:flex; flex-flow: row wrap;">

        <div class="col-xs-12 col-sm-4" >
          <div style="border-bottom:5px solid; border-bottom-color:#df5400; height: 100%">

您可以使用
class=“col-xs-12 col-sm-4”


取代我

项目1 Lorem ipsum dolor sit amet,是一位杰出的献身者。佩伦特斯式欧盟尼西发酵剂、莫利斯·马萨·奎斯、权杖精英。Donec nec viverra

项目2 取代我

Lorem ipsum dolor sit amet,是一位杰出的献身者。莫里斯·拉奥里特·莱克图斯。福斯·洛博蒂斯(Fusce lobortis)、维利特·塞德·菲尼布斯·沃里帕特(velit sed finibus Volivepat)、马格纳·尼布·波特托·胡斯托(magna nibh porttitor justo)和奥纳雷·夸姆·努克(ornare quam Nu。拉齐尼亚镰刀菌

取代我

项目3 Lorem ipsum dolor sit amet,是一位杰出的献身者。佩伦特斯式欧盟尼西发酵剂、莫利斯·马萨·奎斯、权杖精英。Donec nec viverra

项目4 取代我

Lorem ipsum dolor sit amet,是一位杰出的献身者。佩伦特斯式欧盟尼西发酵剂、莫利斯·马萨·奎斯、权杖精英。Donec nec viverra

项目5 取代我

Lorem ipsum dolor sit amet,是一位杰出的献身者。佩伦特斯式欧盟尼西发酵剂、莫利斯·马萨·奎斯、权杖精英。Donec nec viverra

取代我

项目6 Lorem ipsum dolor sit amet,是一位杰出的献身者。莫里斯·拉奥里特·莱克图斯。福斯·洛博蒂斯(Fusce lobortis)、维利特·塞德·菲尼布斯·沃里帕特(velit sed finibus Volivepat)、马格纳·尼布·波特托·胡斯托(magna nibh porttitor justo)和奥纳雷·夸姆·努克(ornare quam Nu。拉齐尼亚镰刀菌


设置绝对高度是选项吗?对于列中的每个div,设置100%高度。col-xs-12.col-sm-4>div{height:100%;}。就像@HappyCarts建议的那样。你也可以创建自定义类,而不是使用所有的内联样式(即使是cms),那么如果你不能包含单独的css文件,至少你可以在文档顶部的
块中包含所有样式。将来你会很感激当他来编辑这是我的上述解决方案,如果你想看到它。我没有发布答案,因为@ovokuru比我抢先一步,但我认为类部分可能有用不幸的是,没有访问标题的权限-我认为样式标记需要在标题中?我错了吗?谢谢,工作做得很好!我想我需要更深入地研究flexbox。这不起作用-它最终做了与我的第二个示例相同的事情(根据div中内容的大小边界的不均匀放置)Bootstrap 4与Bootstrap 3可能存在的问题?
    <div class="container-fluid">
    <div class="row" style="display:flex; flex-flow: row wrap;">

        <div class="col-xs-12 col-sm-4" >
        <div style="border-bottom:5px solid; border-bottom-color:#df5400;">
    <div class="container-fluid">
      <div class="row" style="display:flex; flex-flow: row wrap;">

        <div class="col-xs-12 col-sm-4" >
          <div style="border-bottom:5px solid; border-bottom-color:#df5400; height: 100%">