当我没有12列时,如何使用Bootstrap?

时间:2015-04-24 02:44:50

标签: twitter-bootstrap twitter-bootstrap-3

我正在尝试在我的网站上使用Twitter Bootstrap,但在列数根本不添加到12的情况下我该怎么办?

例如,我有2行,每行有4列。然而,最后一栏将描述海滨物业。如果该物业不在水面上,我不希望第二排有一列。

An example of what I mean。如果我不希望最后一栏以“Waterfront Features”为例,我该怎么编码呢?

1 个答案:

答案 0 :(得分:0)

对于四列,您可以定义3个列空间,如果海滨不存在,那么您可以将该区域留空或定义具有4个列空间的特定行。 您可以在图片库中应用相同的内容。

实施例: -

<div class="container">
        <div class="row">
            <div class="col-lg-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div>
            <div class="col-lg-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div>
            <div class="col-lg-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div>
            <div class="col-lg-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div>
            <div class="col-lg-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div>
            <div class="col-lg-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div>
            <!-- If waterfront is not there don't add. Leave it blank. Otherwise define this row as col-lg-4 -->
        </div>
    </div>