2014-04-13 22 views
1

我试图创建Twitter的引导一个负责任的盒子正是这样:创建的Twitter边界框引导使用CSS3

enter image description here

现在,我已经创建了一个coloumn

<div class="col-lg-4" style="border-style: solid;"> 
<h2>Title</h2> 
<p>Data</p> 

</div> 

给所有这些边界不起作用。什么是最好的方式?

回答

0

也许这样的事情? Demo

HTML

<div class="row"> 
    <div class="col-lg-4"> 

    <h2 class="title">Python Native Datatypes</h2> 

     <div class="box"> 
      <ul> 
       <li>Data</li> 
       <li>Data</li> 
       <li>Data</li> 
      </ul> 
     </div> 
    </div> 

CSS

.box { 
border: solid 1px #000; 
padding: 10px; 
z-index:0; 
position: relative; 
width:90%; 
margin: -20px auto 0 auto; 
} 
.box li { 
list-style: none; 
} 
.title { 
background:green; 
z-index:1; 
position: relative; 
padding: 5px; 
text-align:center; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px; 
color: #fff; 
font-weight: 200; 
}