使用bootstrap从ROW的右侧到左侧排序
我是Bootstrap的新手。我只是想从左到右排序项目。我想在这个例子中在大屏幕右侧显示203个用户。我尝试使用pull-right和text-right但它们不起作用。 如果有人能帮助我解决这个问题，我将感激不尽。请相应的建议
body{
background:#f4f4f4;
}
@font-face {
font-family: 'Google';
src: url('/fonts/Google.eot?#') format('eot'), /* IE6–8 */
url('/fonts/Google.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('/fonts/Google.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
*{
font-family: Google, Arial, Helvetica, sans-serif;
direction: rtl;
}
/* Navbar */
.navbar{
min-height: 33px !important;
margin-bottom:0;
border-radius:0;
}
.navbar-nav > li > a, .navbar-brand{
padding-top:6px !important;
padding-bottom:0 !important;
height: 33px;
}
.navbar-default {
background-color: #e74c3c;
border-color: #c0392b;
}
.navbar-default .navbar-brand {
color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffbbbc;
}
.navbar-default .navbar-text {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ffbbbc;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
.navbar-default .navbar-toggle {
border-color: #c0392b;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #c0392b;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ecf0f1;
}
.navbar-default .navbar-link {
color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
color: #ffbbbc;
}
/* Custom */
.main-color-bg{
background-color: #e74c3c !important;
border-color: #c0392b !important;
color:#ffffff !important;
}
/* Header */
#header{
background:#333333;
color:#ffffff;
padding-bottom: 10px;
margin-bottom: 15px;
}
#header .create{
padding-top: 20px;
}
/* Breadcrumb */
.breadcrumb{
background:#cccccc;
color:#333333;
}
.breadcrumb a{
color:#333333;
}
/* Progress Bars */
.progress-bar{
background:#333333;
color:#ffffff;
}
.dash-box{
text-align:center;
}
#login{
margin-top:30px;
}
/* Footer */
#footer{
background:#333333;
color:#ffffff;
text-align:center;
padding:30px;
margin-top:30px;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffbbbc;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
}
.loginlink{
margin-top:10px;
padding-top:10px;
}
.linkcolorfont{
color: #000000;
text-decoration: none;
}
a:hover{
text-decoration: none;
color: #555555;
}
img {
display: block;
margin: 0 auto;
}
.page-right {
float: right;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header navbar-right">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<p class="navbar-brand" >کاربر گرامی آرمان نجاحی خوش آمدید.</p>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="login.html">خروج</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<header id="header">
<div class="container">
<div class="row">
<div class="col-md-10 pull-right">
<h1><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> مدیریت <small>صفحات اینستاگرام خود را مدیریت نمایید.</small></h1>
</div>
<div class="col-md-2 navbar-left">
<div class="dropdown create navbar-left">
<button class="btn btn-default">
تنظیمات
</button>
</div>
</div>
</div>
</div>
</header>
<section id="breadcrumb">
<div class="container">
<ol class="breadcrumb">
<li class="active">مدیریت</li>
</ol>
</div>
</section>
<section id="main">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="list-group">
<p class="list-group-item active main-color-bg">
اطلاعات
</p>
<p class="list-group-item"><span class="glyphicon glyphicon-usd" aria-hidden="true"></span> اعتبار شما : 125</p>
<p class="list-group-item"><button class="btn btn-default text-center pagination-centered"><span class="glyphicon glyphicon-credit-card text-center pagination-centered"></span>
خرید اعتبار
</button></p>
</div>
</div>
<div class="col-md-9">
<!-- Website Overview -->
<div class="panel panel-default">
<div class="panel-heading main-color-bg">
<h3 class="panel-title">Website Overview</h3>
</div>
<div class="panel-body ">
<div class="row .text-right">
<div class="col-md-6 ">
<div class="well dash-box">
<div class="row">
<div class="col-sd-6">
<img src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-circle pull-center" alt="Cinque Terre" width="100px" height="100px">
</div>
<div class="col-sd-6">
<h2 class="pull-center">shikkhooneh</h2>
</div>
</div>
<h2><span class="glyphicon glyphicon-user" aria-hidden="true"></span> 203</h2>
<h4>Users</h4>
</div>
</div>
<div class="col-md-6">
<div class="well dash-box">
<div class="row">
<div class="col-sd-6">
<img src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-circle pull-center" alt="Cinque Terre" width="100px" height="100px">
</div>
<div class="col-sd-6">
<h2 class="pull-center">shikkhooneh</h2>
</div>
</div>
<h2><span class="glyphicon glyphicon-user" aria-hidden="true"></span> 204</h2>
<h4>Users</h4>
</div>
</div>
</div>
<div class="col-md-6">
<div class="well dash-box">
<h2><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> 12</h2>
<h4>Pages</h4>
</div>
</div>
<div class="col-md-6">
<div class="well dash-box">
<h2><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 33</h2>
<h4>Posts</h4>
</div>
</div>
<div class="col-md-6">
<div class="well dash-box">
<h2><span class="glyphicon glyphicon-stats" aria-hidden="true"></span> 12,334</h2>
<h4>Visitors</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer id="footer">
<p>Copyright AdminStrap, © 2017</p>
</footer>
<!-- Modals -->
<!-- Add Page -->
<div class="modal fade" id="addPage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add Page</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Page Title</label>
<input type="text" class="form-control" placeholder="Page Title">
</div>
<div class="form-group">
<label>Page Body</label>
<textarea name="editor1" class="form-control" placeholder="Page Body"></textarea>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Published
</label>
</div>
<div class="form-group">
<label>Meta Tags</label>
<input type="text" class="form-control" placeholder="Add Some Tags...">
</div>
<div class="form-group">
<label>Meta Description</label>
<input type="text" class="form-control" placeholder="Add Meta Description...">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
<script>
CKEDITOR.replace( 'editor1' );
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
1 个答案:
答案 0 :(得分：1)
利用bootstrap col-md-push-* and col-md-pull-*来达到预期的效果
修改您的HTML代码
HTML
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header navbar-right">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<p class="navbar-brand" >کاربر گرامی آرمان نجاحی خوش آمدید.</p>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="login.html">خروج</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<header id="header">
<div class="container">
<div class="row">
<div class="col-md-10 pull-right">
<h1><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> مدیریت <small>صفحات اینستاگرام خود را مدیریت نمایید.</small></h1>
</div>
<div class="col-md-2 navbar-left">
<div class="dropdown create navbar-left">
<button class="btn btn-default">
تنظیمات
</button>
</div>
</div>
</div>
</div>
</header>
<section id="breadcrumb">
<div class="container">
<ol class="breadcrumb">
<li class="active">مدیریت</li>
</ol>
</div>
</section>
<section id="main">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="list-group">
<p class="list-group-item active main-color-bg">
اطلاعات
</p>
<p class="list-group-item"><span class="glyphicon glyphicon-usd" aria-hidden="true"></span> اعتبار شما : 125</p>
<p class="list-group-item"><button class="btn btn-default text-center pagination-centered"><span class="glyphicon glyphicon-credit-card text-center pagination-centered"></span>
خرید اعتبار
</button></p>
</div>
</div>
<div class="col-md-9">
<!-- Website Overview -->
<div class="panel panel-default">
<div class="panel-heading main-color-bg">
<h3 class="panel-title">Website Overview</h3>
</div>
<div class="panel-body ">
<div class="row .text-right">
<div class="col-md-6 col-md-push-6 ">
<div class="well dash-box">
<div class="row">
<div class="col-sd-6">
<img src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-circle pull-center" alt="Cinque Terre" width="100px" height="100px">
</div>
<div class="col-sd-6">
<h2 class="pull-center">shikkhooneh</h2>
</div>
</div>
<h2><span class="glyphicon glyphicon-user" aria-hidden="true"></span> 203</h2>
<h4>Users</h4>
</div>
</div>
<div class="col-md-6 col-md-pull-6">
<div class="well dash-box">
<div class="row">
<div class="col-sd-6">
<img src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-circle pull-center" alt="Cinque Terre" width="100px" height="100px">
</div>
<div class="col-sd-6">
<h2 class="pull-center">shikkhooneh</h2>
</div>
</div>
<h2><span class="glyphicon glyphicon-user" aria-hidden="true"></span> 204</h2>
<h4>Users</h4>
</div>
</div>
</div>
<div class="col-md-6 col-md-push-6">
<div class="well dash-box">
<h2><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> 12</h2>
<h4>Pages</h4>
</div>
</div>
<div class="col-md-6 col-md-pull-6">
<div class="well dash-box">
<h2><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 33</h2>
<h4>Posts</h4>
</div>
</div>
<div class="col-md-6 col-md-push-6">
<div class="well dash-box">
<h2><span class="glyphicon glyphicon-stats" aria-hidden="true"></span> 12,334</h2>
<h4>Visitors</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer id="footer">
<p>Copyright AdminStrap, © 2017</p>
</footer>
<!-- Modals -->
<!-- Add Page -->
<div class="modal fade" id="addPage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add Page</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Page Title</label>
<input type="text" class="form-control" placeholder="Page Title">
</div>
<div class="form-group">
<label>Page Body</label>
<textarea name="editor1" class="form-control" placeholder="Page Body"></textarea>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Published
</label>
</div>
<div class="form-group">
<label>Meta Tags</label>
<input type="text" class="form-control" placeholder="Add Some Tags...">
</div>
<div class="form-group">
<label>Meta Description</label>
<input type="text" class="form-control" placeholder="Add Meta Description...">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
<script>
CKEDITOR.replace( 'editor1' );
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？