如何在行之间的分隔符上添加一些文本?

时间:2012-08-19 07:57:42

标签: html css twitter-bootstrap responsive-design interface-design

示例(以“OR”作为文本):

Example (with "OR" as text)

这个想法是关于列的崩溃 - 即:在移动大小的屏幕上查看 - 它将出现在submitClick me之间。

如何在行之间的分隔符上添加一些文字?

2 个答案:

答案 0 :(得分:1)

<style>
.wrapper{
width:900px;
margin:0 auto;}

.left{
min-height:300px;
width:400px;
background-color:#9F0;
float:left;} 

.right{
min-height:300px;
width:400px;
background-color:#9F0;
float:right;}

.mid{
padding-top:150px;
padding-left:40px;
min-height:150px;
width:60px;
float:left;
background-color:#C00;}
</style>

<body>
<div class="wrapper">
    <div class="left">SUBMIT CONTENT HERE</div>
    <div class="mid">OR</div>
    <div class="right">CLICK ME CONTENT HERE</div>   
</div>

我认为这可以帮到你。现在,如果要在mid上添加垂直条,可以将其设置为样式,您可以将该栏添加为背景图像 然后你可以设置它的样式或添加任何DIV标签它的愿望..;)

答案 1 :(得分:1)

为什么不在两种表单之间使用.span

<div class="container">
    <div class="row">
        <div class="span5">
            form 1
        </div>
        <div class="span2">OR</div>
        <div class="span5">
            form 2
        </div>
    </div>
</div>

Demo (jsfiddle)