Panel text alignment in Twitter Bootstrap
Question
I am trying to create this mobile app where when I shrink the window size to its minimum size, but all hell breaks loose.
The text wraps, due to which the alignment of the panel breaks. I tried various styles but couldn't make it work. Please help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Bootply snippet - Boxed Layout (SO)</title>
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="apple-touch-icon" href="/bootstrap/img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="/bootstrap/img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/bootstrap/img/apple-touch-icon-114x114.png">
</head>
<body >
<h2 class="text-center">Club</h2>
<div class="container">
<div class="foo col-xs-6 col-md-3">
<div class="panel panel-default">
<div class="panel-heading text-center" >Candy Crush</div>
<div class="panel-body">
<img class="img-responsive center-block" width="310" height="310" alt="Cinque Terre" src="https://cdn2.iconfinder.com/data/icons/pack1-baco-flurry-icons-style/512/Game_Center.png"/>
</div>
</div>
</div>
<div class="foo col-xs-6 col-md-3">
<div class="panel panel-default">
<div class="panel-heading text-center">Whack</div>
<div class="panel-body"> <img class="img-responsive center-block" width="310" height="310" alt="Cinque Terre" src="https://cdn2.iconfinder.com/data/icons/pack1-baco-flurry-icons-style/512/Game_Center.png"/>
</div>
</div>
</div>
<div class="foo col-xs-6 col-md-3">
<div class="panel panel-default">
<div class="panel-heading text-center">Title</div>
<div class="panel-body"> <img class="img-responsive center-block" width="310" height="310" alt="Cinque Terre" src="https://cdn2.iconfinder.com/data/icons/pack1-baco-flurry-icons-style/512/Game_Center.png"/>
</div>
</div>
</div>
<div class="foo col-xs-6 col-md-3">
<div class="panel panel-default">
<div class="panel-heading text-center">Quake</div>
<div class="panel-body"> <img class="img-responsive center-block" width="310" height="310" alt="Cinque Terre" src="https://cdn2.iconfinder.com/data/icons/pack1-baco-flurry-icons-style/512/Game_Center.png"/>
</div>
</div>
</div>
</div>
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>
1 answers
solution1
1 ACCPTED 2015-07-21 08:34:05
尝试将此样式放在面板标题上：
style="overflow: hidden;text-overflow: ellipsis; white-space: nowrap;"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
text alignment in twitter-bootstrap
Twitter bootstrap alignment issues
twitter bootstrap table alignment
twitter bootstrap alignment elements center
Alignment in Twitter Bootstrap 3 navbar toggle
Twitter Bootstrap collapse panel sideways
bootstrap 3: Text alignment in jumbotron
Bootstrap text alignment is not align
Text Alignment in Bootstrap
Bootstrap Navbar text alignment
Related Tags