Bootstrap Col类无法正常工作

时间：2017-06-15 12:32:02

标签： css html5 twitter-bootstrap css3 twitter-bootstrap-3

请看一下

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

为什么名称3 部分没有在名称1 下面开始，为什么有空间（我认为是因为名称2 ）。

您能否指导我如何在名称1 之后显示名称3 。 好吧，让我清楚一件事，名字将是名称100，所以不能把负边距放到名称3或任何其他名称，因为它是动态的。

我还附上了html结果的截图。 enter image description here

3 个答案:

答案 0 :(得分：2)

嗨，你因为兄弟姐妹的身高不均而面临这个问题。

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

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

enter image description here

答案 1 :(得分：1)

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

＆＃13;
＆＃13; 
.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;
        }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

好吧，你无法在本地使用bootstrap获得所需的结果。您需要为此使用jquery lib或更改HTML布局以欺骗网格系统。

使用bootstrap时，它为列提供了float属性。 Float将水平对齐元素，名称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。

我希望这会有所帮助。

相关问题
最新问题