当前位置: 首页 > 面试题库 >

如何获得Bootstrap列以跨越多行?

茅华灿
2023-03-14
问题内容

我试图弄清楚如何用Bootstrap做下面的网格。

我不确定如何创建跨越两行的框(数字1)。这些框按照其排列顺序以编程方式生成。方框1是欢迎消息。

关于最佳方法的任何想法吗?


问题答案:

对于Bootstrap 3:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>





<div class="row">

    <div class="col-md-4">

        <div class="well">1

            <br/>

            <br/>

            <br/>

            <br/>

            <br/>

        </div>

    </div>

    <div class="col-md-8">

        <div class="row">

            <div class="col-md-6">

                <div class="well">2</div>

            </div>

            <div class="col-md-6">

                <div class="well">3</div>

            </div>

        </div>

        <div class="row">

            <div class="col-md-6">

                <div class="well">4</div>

            </div>

            <div class="col-md-6">

                <div class="well">5</div>

            </div>

        </div>

    </div>

</div>

<div class="row">

    <div class="col-md-4">

        <div class="well">6</div>

    </div>

    <div class="col-md-4">

        <div class="well">7</div>

    </div>

    <div class="col-md-4">

        <div class="well">8</div>

    </div>

</div>

对于Bootstrap 2:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>



<div class="row-fluid">

    <div class="span4"><div class="well">1<br/><br/><br/><br/><br/></div></div>

    <div class="span8">

        <div class="row-fluid">

            <div class="span6"><div class="well">2</div></div>

            <div class="span6"><div class="well">3</div></div>

        </div>

        <div class="row-fluid">

            <div class="span6"><div class="well">4</div></div>

            <div class="span6"><div class="well">5</div></div>

        </div>

    </div>

</div>

<div class="row-fluid">

    <div class="span4">

        <div class="well">6</div>

    </div>

    <div class="span4">

        <div class="well">7</div>

    </div>

    <div class="span4">

        <div class="well">8</div>

    </div>

</div>


 类似资料:
  • 在Bootstrap中,如何获得一个像下面这样的按钮组,它跨越父元素的整个宽度?(与“.btn block”类类似,但应用于组http://getbootstrap.com/css/#buttons-尺寸)

  • 问题内容: 我正在尝试使列范围可用。具体来说,我正在寻找一个嵌套在另一个内部的方法,当用户单击以查看嵌套表时,它应该展开以向下推动下面的行并填充空白处。这类似于您在MS Access中可以嵌套表的情况,单击行上的“展开”按钮将向您显示嵌套表中的相应条目。 如果有人知道使用进行列跨度的方法,您能指出我正确的方向吗?或者,如果您知道执行此操作的其他方法,则欢迎您提出建议。该应用程序是使用Swing构建

  • 我是JavaFX新手,正在尝试用GridPane做一个简单的按钮设计。 我不知道如何让一个按钮跨越多个列/行,而不把其他按钮推开。我一直在使用HBox和VBox将其他按钮组合在一起。我试过在按钮上设置Rowspan,但似乎不起作用。 看起来怎么样 我希望它看起来怎么样 这是我的代码:

  • VLAN(Virtual Local Area Network),是基于以太网交互技术构建的虚拟网络,既可以将同一物理网络划分成多个VALN,也可以跨越物理网络障碍,将不同子网中的用户划到同一个VLAN中。图2是一个VLAN划分的例子。 图2 实现VLAN的方式有很多种,基于交换设备的VLAN划分,一般有两种: l 基于交换机的端口划分 l 基于IEEE 802.1q协议,扩展以太网帧格式 基于第

  • 我知道我可以用跨越两列: 但是我怎样才能使第一个项目也跨越2行呢? 我曾尝试通过将其他项目的高度增加一倍来设置第一个项目的高度,但这导致与第一个项目相同行的每个项目也被拉伸到该高度:

  • 我正在使用jsoup HTML解析器,并试图进入span类并从中获取文本,但它什么也不返回,并且其大小始终为零。我粘贴了HTML源代码的一小部分。请帮我提取文本。 我尝试了以下代码: 如果你对我的内容不是很清楚,请问我。提前谢谢。