Bootstrap Col 类无法正常工作 [重复]

Posted 2023-03-05

技术标签:

【中文标题】Bootstrap Col 类无法正常工作 [重复]【英文标题】：Bootstrap Col class not working correctly [duplicate] 【发布时间】：2017-11-17 22:54:20 【问题描述】：

请看一下

.colName 
             text-align: center;
         

         .calbox 
             border: 1px solid #999;
             padding: 5px;
             min-height: 40px;
            

        .Box1 
            padding: 5px !important;
            margin: 1px 2px 0px;
            border: 1px solid #aaa4a4 !important;
            font-size: .95em;
            line-height: 1.3;
            border-radius: 3px;
            font-weight: normal;
            color: #000 !important;
        

        .Box1_a 
            cursor: pointer !important;
            text-decoration: none !important;
            color: #000 !important;

<script src="https://getbootstrap.com/dist/js/bootstrap.js"></script>
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
        <div class="row-fluid">
            <div class="col-xs-6 col-md-3">
                <div class="row">
                    <div class="col-xs-12 colName"><b>Name 1</b></div>
                    <div class="col-xs-12 colFS Mon">
                        28th Nov
                        <div class="calbox">28</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        29th Nov
                        <div class="calbox">29</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        30th Nov
                        <div class="calbox">30</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <div class="row">
                    <div class="col-xs-12 colName"><b>Name 2</b></div>
                    <div class="col-xs-12 colFS Mon">
                        28th Nov
                        <div class="calbox">28</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        29th Nov
                        <div class="calbox" style="height:200px;">29</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        30th Nov
                        <div class="calbox">30</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <div class="row">
                    <div class="col-xs-12 colName"><b>Name 3</b></div>
                    <div class="col-xs-12 colFS Mon">
                        28th Nov
                        <div class="calbox">28</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        29th Nov
                        <div class="calbox">29</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        30th Nov
                        <div class="calbox">30</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <div class="row">
                    <div class="col-xs-12 colName"><b>Name 4</b></div>
                    <div class="col-xs-12 colFS Mon">
                        28th Nov
                        <div class="calbox">28</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        29th Nov
                        <div class="calbox">29</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        30th Nov
                        <div class="calbox">30</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <div class="row">
                    <div class="col-xs-12 colName"><b>Name 5</b></div>
                    <div class="col-xs-12 colFS Mon">
                        28th Nov
                        <div class="calbox">28</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        29th Nov
                        <div class="calbox">29</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        30th Nov
                        <div class="calbox">30</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

为什么 Name 3 部分没有从 Name 1 下方开始，为什么会有空间（我认为是因为 Name 2 中的额外高度>)。

请指导我如何在 Name 1 之后显示 Name 3。好吧，让我澄清一件事，名称将是名称 100，因此不能将负边距设置为名称 3 或其他任何内容，因为它都是动态的。

我还附上了html结果的截图。

【问题讨论】：

您正在遵循row 方法，这就是它的行为方式。对于您想要的场景，请使用column 方法 @DeepakYadav 你能指导我在哪里改变吗？ 【参考方案1】：

如果您能够进行标记更改，请将它们按列放置，奇数在 1 列中，偶数在另一列中。

.colName 
             text-align: center;
         

         .calbox 
             border: 1px solid #999;
             padding: 5px;
             min-height: 40px;
            

        .Box1 
            padding: 5px !important;
            margin: 1px 2px 0px;
            border: 1px solid #aaa4a4 !important;
            font-size: .95em;
            line-height: 1.3;
            border-radius: 3px;
            font-weight: normal;
            color: #000 !important;
        

        .Box1_a 
            cursor: pointer !important;
            text-decoration: none !important;
            color: #000 !important;

<script src="https://getbootstrap.com/dist/js/bootstrap.js"></script>
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
        <div class="row-fluid">
            <div class="col-xs-6 col-md-3">
                <div class="row">
                    <div class="col-xs-12 colName"><b>Name 1</b></div>
                    <div class="col-xs-12 colFS Mon">
                        28th Nov
                        <div class="calbox">28</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        29th Nov
                        <div class="calbox">29</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        30th Nov
                        <div class="calbox">30</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 colName"><b>Name 3</b></div>
                    <div class="col-xs-12 colFS Mon">
                        28th Nov
                        <div class="calbox">28</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        29th Nov
                        <div class="calbox">29</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        30th Nov
                        <div class="calbox">30</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 colName"><b>Name 5</b></div>
                    <div class="col-xs-12 colFS Mon">
                        28th Nov
                        <div class="calbox">28</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        29th Nov
                        <div class="calbox">29</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        30th Nov
                        <div class="calbox">30</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <div class="row">
                    <div class="col-xs-12 colName"><b>Name 2</b></div>
                    <div class="col-xs-12 colFS Mon">
                        28th Nov
                        <div class="calbox">28</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        29th Nov
                        <div class="calbox" style="height:200px;">29</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        30th Nov
                        <div class="calbox">30</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 colName"><b>Name 4</b></div>
                    <div class="col-xs-12 colFS Mon">
                        28th Nov
                        <div class="calbox">28</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        29th Nov
                        <div class="calbox">29</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        30th Nov
                        <div class="calbox">30</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

【讨论】：

哇，我没有阅读您的完整回复，只需单击运行即可解决我的问题，谢谢，现在让我阅读：D 哦不，不，你改变了所有的 html :) 好吧，我编辑了这个问题，它都是动态生成的，所有名称的 HTML 模式都相同。 @user2972061 更新了我对 如果您能够进行标记更改，... 的回答。现在它至少对你或其他任何可以做出改变的人来说是一个可行的选择:)【参考方案2】：

您好，由于兄弟姐妹身高不均，您遇到了这个问题。

在这里，我使用 masonry 来输出你想要的：https://codepen.io/ShubhamAshish/pen/rrzRmo

$('.row-fluid').masonry(
    itemSelector: '.col-xs-6.col-md-3',
);

【讨论】：

hmmm 好像会起作用 :) 让我输入我的代码！看起来不错，+1，别忘了提到需要添加 Masonry 库是的 :) 感谢@LGSon 的指导。我在codepen中添加了东西。所以，如果有人下载了这支笔，他/她可以得到所有的东西。 :) @Shubham 很好，它适用于我给定的 HTML :) 但它在项目中不起作用，因为它与其他 jqueries 冲突 :( .. 是否有任何其他特殊的 CSS 或 HTML 选项。谢谢感谢您的好评！如果你已经在使用jquery，那么你只需要添加unpkg.com/masonry-layout@4.2.0/dist/masonry.pkgd.min.js【参考方案3】：

那么，您不能通过本机引导程序获得所需的结果。您需要为此使用 jquery lib 或更改 HTML 布局以欺骗网格系统。

当您使用 bootstrap 时，它会为列赋予浮动属性。浮动将水平对齐元素，名称 3 永远不会浮动以覆盖空白。

jQuery 方式：你可以使用https://isotope.metafizzy.co/layout-modes/packery.html

HTML 方式：另一种方法是使用不同的 HTML 布局。像这样的：

<div class="cont">
  <div class="col1 col-xs-6">
   <div class="name1 col-xs-12 col-md-6"></div>
   <div class="name3 col-xs-12 col-md-6"></div>
  </div>
  <div class="col2 col-xs-6">
   <div class="name2 col-xs-12 col-md-6"></div>
   <div class="name4 col-xs-12 col-md-6"></div>
</div>

我不会推荐这种类型的 html 布局，因为如果您更改任何名称块的高度，那么您将不得不再次更改 HTML。

我希望这会有所帮助。

【讨论】：

以上是关于Bootstrap Col 类无法正常工作 [重复]的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap flex 列在 Firefox 中无法正常工作

Bootstrap 导航栏类无法正常工作

引导网格未按预期工作[重复]

通过 jquery 在 Bootstrap 4 轮播中添加类“活动”，从 mongodb 加载数据时无法正常工作

Bootstrap Navbar 与品牌折叠 [重复]

加入 Dataframe 的相同列后，Drop 功能无法正常工作