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

【问题标题】：How do I add some text onto the divider between rows?如何在行之间的分隔符上添加一些文本？
【发布时间】：2012-08-19 07:57:41
【问题描述】：

示例（以“OR”作为文本）：

这个想法是在列折叠时——即：在移动大小的屏幕上查看——它将出现在submit和Click me之间。

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

【问题讨论】：

而您当前的 html 将是..？
Current HTML (JSfiddle)

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

【解决方案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)

【讨论】：

谢谢，不是我想要的，但似乎效果更好。我应该首先想到这个：P

【解决方案2】：

<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 标签这是您的愿望.. ;)

【讨论】：