Skip to content

G
gentelella

吃冰棍不. / gentelella
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 1
Fork 0
G
gentelella

体验新版 GitCode，发现更多精彩内容 >>

提交 a282c7e4 编写于 作者: A Aigars Silkalns
浏览文件
操作

Merge pull request #110 from christianesperar/master 

Fix profile details overlapping content and fix messy layout when profile height is different
上级 af277af5 fc3c0364
隐藏空白更改
内联 并排
Showing with 94 addition and 105 deletion
production/contacts.html
浏览文件 @ a282c7e4
......@@ -320,58 +320,47 @@
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12">
<div class="x_panel">
<div class="x_content">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12" style="text-align:center;">
<div class="col-md-12 col-sm-12 col-xs-12 text-center">
<ul class="pagination pagination-split">
<li><a href="#">A</a>
</li>
<li><a href="#">B</a>
</li>
<li><a href="#">C</a>
</li>
<li><a href="#">D</a>
</li>
<li><a href="#">E</a>
</li>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
<li>...</li>
<li><a href="#">W</a>
</li>
<li><a href="#">X</a>
</li>
<li><a href="#">Y</a>
</li>
<li><a href="#">Z</a>
</li>
<li><a href="#">W</a></li>
<li><a href="#">X</a></li>
<li><a href="#">Y</a></li>
<li><a href="#">Z</a></li>
</ul>
</div>
<div class="clearfix"></div>
<div class="clearfix"></div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-md-4 col-sm-4 col-xs-12 profile_details">
<div class="well profile_view">
<div class="col-sm-12">
<h4 class="brief"><i>Digital Strategist</i></h4>
<div class="left col-xs-7">
<h2>Nicole Pearson</h2>
<p><strong>About: </strong> Web Designer / UI. </p>
<p><strong>About: </strong> Web Designer / UX / Graphic Artist / Coffee Lover </p>
<ul class="list-unstyled">
<li><i class="fa fa-phone"></i> Address: </li>
<li><i class="fa fa-phone"></i> Address: </li>
<li><i class="fa fa-building"></i> Address: </li>
<li><i class="fa fa-phone"></i> Phone #: </li>
</ul>
</div>
<div class="right col-xs-5 text-center">
......@@ -391,7 +380,7 @@
</div>
<div class="col-xs-12 col-sm-6 emphasis">
<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">
</i> <i class="fa fa-comments-o"></i> </button>
</i> <i class="fa fa-comments-o"></i> </button>
<button type="button" class="btn btn-primary btn-xs">
<i class="fa fa-user"> </i> View Profile
</button>
......@@ -400,7 +389,7 @@
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-md-4 col-sm-4 col-xs-12 profile_details">
<div class="well profile_view">
<div class="col-sm-12">
<h4 class="brief"><i>Digital Strategist</i></h4>
......@@ -408,9 +397,8 @@
<h2>Nicole Pearson</h2>
<p><strong>About: </strong> Web Designer / UI. </p>
<ul class="list-unstyled">
<li><i class="fa fa-phone"></i> Address: </li>
<li><i class="fa fa-phone"></i> Address: </li>
<li><i class="fa fa-building"></i> Address: </li>
<li><i class="fa fa-phone"></i> Phone #: </li>
</ul>
</div>
<div class="right col-xs-5 text-center">
......@@ -430,7 +418,7 @@
</div>
<div class="col-xs-12 col-sm-6 emphasis">
<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">
</i> <i class="fa fa-comments-o"></i> </button>
</i> <i class="fa fa-comments-o"></i> </button>
<button type="button" class="btn btn-primary btn-xs">
<i class="fa fa-user"> </i> View Profile
</button>
......@@ -439,7 +427,7 @@
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-md-4 col-sm-4 col-xs-12 profile_details">
<div class="well profile_view">
<div class="col-sm-12">
<h4 class="brief"><i>Digital Strategist</i></h4>
......@@ -447,9 +435,8 @@
<h2>Nicole Pearson</h2>
<p><strong>About: </strong> Web Designer / UI. </p>
<ul class="list-unstyled">
<li><i class="fa fa-phone"></i> Address: </li>
<li><i class="fa fa-phone"></i> Address: </li>
<li><i class="fa fa-building"></i> Address: </li>
<li><i class="fa fa-phone"></i> Phone #: </li>
</ul>
</div>
<div class="right col-xs-5 text-center">
......@@ -469,7 +456,7 @@
</div>
<div class="col-xs-12 col-sm-6 emphasis">
<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">
</i> <i class="fa fa-comments-o"></i> </button>
</i> <i class="fa fa-comments-o"></i> </button>
<button type="button" class="btn btn-primary btn-xs">
<i class="fa fa-user"> </i> View Profile
</button>
......@@ -478,7 +465,7 @@
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-md-4 col-sm-4 col-xs-12 profile_details">
<div class="well profile_view">
<div class="col-sm-12">
<h4 class="brief"><i>Digital Strategist</i></h4>
......@@ -486,9 +473,8 @@
<h2>Nicole Pearson</h2>
<p><strong>About: </strong> Web Designer / UI. </p>
<ul class="list-unstyled">
<li><i class="fa fa-phone"></i> Address: </li>
<li><i class="fa fa-phone"></i> Address: </li>
<li><i class="fa fa-building"></i> Address: </li>
<li><i class="fa fa-phone"></i> Phone #: </li>
</ul>
</div>
<div class="right col-xs-5 text-center">
......@@ -508,7 +494,7 @@
</div>
<div class="col-xs-12 col-sm-6 emphasis">
<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">
</i> <i class="fa fa-comments-o"></i> </button>
</i> <i class="fa fa-comments-o"></i> </button>
<button type="button" class="btn btn-primary btn-xs">
<i class="fa fa-user"> </i> View Profile
</button>
......@@ -516,22 +502,21 @@
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-md-4 col-sm-4 col-xs-12 profile_details">
<div class="well profile_view">
<div class="col-sm-12">
<h4 class="brief"><i>Digital Strategist</i></h4>
<div class="left col-xs-7">
<h2>Nicole Pearson</h2>
<p><strong>About: </strong> Web Designer / UI. </p>
<p><strong>About: </strong> Web Designer / UX / Graphic Artist / Coffee Lover </p>
<ul class="list-unstyled">
<li><i class="fa fa-phone"></i> Address: </li>
<li><i class="fa fa-phone"></i> Address: </li>
<li><i class="fa fa-building"></i> Address: </li>
<li><i class="fa fa-phone"></i> Phone #: </li>
</ul>
</div>
<div class="right col-xs-5 text-center">
<img src="images/user.png" alt="" class="img-circle img-responsive">
<img src="images/img.jpg" alt="" class="img-circle img-responsive">
</div>
</div>
<div class="col-xs-12 bottom text-center">
......@@ -547,7 +532,7 @@
</div>
<div class="col-xs-12 col-sm-6 emphasis">
<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">
</i> <i class="fa fa-comments-o"></i> </button>
</i> <i class="fa fa-comments-o"></i> </button>
<button type="button" class="btn btn-primary btn-xs">
<i class="fa fa-user"> </i> View Profile
</button>
......@@ -556,7 +541,7 @@
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-md-4 col-sm-4 col-xs-12 profile_details">
<div class="well profile_view">
<div class="col-sm-12">
<h4 class="brief"><i>Digital Strategist</i></h4>
......@@ -564,9 +549,8 @@
<h2>Nicole Pearson</h2>
<p><strong>About: </strong> Web Designer / UI. </p>
<ul class="list-unstyled">
<li><i class="fa fa-phone"></i> Address: </li>
<li><i class="fa fa-phone"></i> Address: </li>
<li><i class="fa fa-building"></i> Address: </li>
<li><i class="fa fa-phone"></i> Phone #: </li>
</ul>
</div>
<div class="right col-xs-5 text-center">
......@@ -586,7 +570,7 @@
</div>
<div class="col-xs-12 col-sm-6 emphasis">
<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">
</i> <i class="fa fa-comments-o"></i> </button>
</i> <i class="fa fa-comments-o"></i> </button>
<button type="button" class="btn btn-primary btn-xs">
<i class="fa fa-user"> </i> View Profile
</button>
......@@ -595,7 +579,7 @@
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-md-4 col-sm-4 col-xs-12 profile_details">
<div class="well profile_view">
<div class="col-sm-12">
<h4 class="brief"><i>Digital Strategist</i></h4>
......@@ -603,9 +587,8 @@
<h2>Nicole Pearson</h2>
<p><strong>About: </strong> Web Designer / UI. </p>
<ul class="list-unstyled">
<li><i class="fa fa-phone"></i> Address: </li>
<li><i class="fa fa-phone"></i> Address: </li>
<li><i class="fa fa-building"></i> Address: </li>
<li><i class="fa fa-phone"></i> Phone #: </li>
</ul>
</div>
<div class="right col-xs-5 text-center">
......@@ -625,7 +608,7 @@
</div>
<div class="col-xs-12 col-sm-6 emphasis">
<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">
</i> <i class="fa fa-comments-o"></i> </button>
</i> <i class="fa fa-comments-o"></i> </button>
<button type="button" class="btn btn-primary btn-xs">
<i class="fa fa-user"> </i> View Profile
</button>
......@@ -634,7 +617,7 @@
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-md-4 col-sm-4 col-xs-12 profile_details">
<div class="well profile_view">
<div class="col-sm-12">
<h4 class="brief"><i>Digital Strategist</i></h4>
......@@ -642,9 +625,8 @@
<h2>Nicole Pearson</h2>
<p><strong>About: </strong> Web Designer / UI. </p>
<ul class="list-unstyled">
<li><i class="fa fa-phone"></i> Address: </li>
<li><i class="fa fa-phone"></i> Address: </li>
<li><i class="fa fa-building"></i> Address: </li>
<li><i class="fa fa-phone"></i> Phone #: </li>
</ul>
</div>
<div class="right col-xs-5 text-center">
......@@ -664,7 +646,7 @@
</div>
<div class="col-xs-12 col-sm-6 emphasis">
<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">
</i> <i class="fa fa-comments-o"></i> </button>
</i> <i class="fa fa-comments-o"></i> </button>
<button type="button" class="btn btn-primary btn-xs">
<i class="fa fa-user"> </i> View Profile
</button>
......@@ -673,7 +655,7 @@
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-md-4 col-sm-4 col-xs-12 profile_details">
<div class="well profile_view">
<div class="col-sm-12">
<h4 class="brief"><i>Digital Strategist</i></h4>
......@@ -681,9 +663,8 @@
<h2>Nicole Pearson</h2>
<p><strong>About: </strong> Web Designer / UI. </p>
<ul class="list-unstyled">
<li><i class="fa fa-phone"></i> Address: </li>
<li><i class="fa fa-phone"></i> Address: </li>
<li><i class="fa fa-building"></i> Address: </li>
<li><i class="fa fa-phone"></i> Phone #: </li>
</ul>
</div>
<div class="right col-xs-5 text-center">
......@@ -703,7 +684,7 @@
</div>
<div class="col-xs-12 col-sm-6 emphasis">
<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">
</i> <i class="fa fa-comments-o"></i> </button>
</i> <i class="fa fa-comments-o"></i> </button>
<button type="button" class="btn btn-primary btn-xs">
<i class="fa fa-user"> </i> View Profile
</button>
......
production/css/custom.css
浏览文件 @ a282c7e4
......@@ -868,73 +868,81 @@ legend {
height: 280px;
}
/* ********* contacts ********************************** */
/** Contacts **/
.profile_details:nth-child(3n){
clear:both;
}
.profile_view {
margin-bottom: 20px;
.profile_details .profile_view {
display: inline-block;
width: 100%;
}
.well.profile_view {
padding: 10px 0 0;
background: #fff;
}
.well.profile_view .divider {
.profile_details .profile_view .divider {
border-top: 1px solid #e5e5e5;
padding-top: 5px;
margin-top: 5px;
}
.well.profile_view .ratings {
.profile_details .profile_view .ratings {
margin-bottom: 0;
}
.pagination.pagination-split li {
display: inline-block;
margin-right: 3px;
}
.pagination.pagination-split li a {
border-radius: 4px;
color: #768399;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.well.profile_view {
background: #fff;
}
.well.profile_view .bottom {
margin-top: -20px;
.profile_details .profile_view .bottom {
background: #F2F5F7;
padding: 9px 0;
border-top: 1px solid #E6E9ED;
}
.well.profile_view .left {
.profile_details .profile_view .left {
margin-top: 20px;
}
.well.profile_view .left p {
.profile_details .profile_view .left p {
margin-bottom: 3px;
}
.well.profile_view .right {
.profile_details .profile_view .right {
margin-top: 0px;
padding: 10px;
}
.well.profile_view .img-circle {
.profile_details .profile_view .img-circle {
border: 1px solid #E6E9ED;
padding: 2px;
}
.well.profile_view h2 {
.profile_details .profile_view h2 {
margin: 5px 0;
}
.well.profile_view .ratings {
.profile_details .profile_view .ratings {
text-align: left;
font-size: 16px;
}
.well.profile_view .brief {
.profile_details .profile_view .brief {
margin: 0;
font-weight: 300;
}
.profile_left {
.profile_details .profile_left {
background: white;
}
/* ********* /contacts ********************************** */
.pagination.pagination-split li {
display: inline-block;
margin-right: 3px;
}
.pagination.pagination-split li a {
border-radius: 4px;
color: #768399;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
/** Contacts **/
/* ********* /custom accordion **************************** */
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或