html - 使用 bootstrap 从 ROW 的右到左排序

标签 html css bootstrap-4

我是 Bootstrap 新手。我只想从左到右对元素进行排序。在此示例中，我想在大屏幕的右侧显示 203 个用户。我尝试使用 pull-right 和 text-right 但它们没有用。 如果有人能帮我解决这个问题，我将不胜感激。请给予相应的建议

enter image description here

这里是 link of my code: 

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, &copy; 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">&times;</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>

最佳答案

利用 Bootstrap col-md-push-* 和 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, &copy; 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">&times;</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>

关于html - 使用 bootstrap 从 ROW 的右到左排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45322611/

上一篇：python - 在生产模式下从服务站点在 Django 中设置静态文件

下一篇：html - 如何以编程方式更改 Bootstrap 屏幕宽度断点？

相关文章：

regex - Html5 模式，检查至少 2 位数字和至少 4 个任意顺序的字母

HTML CSS 水平布局缩放

javascript - 如何使用它所在的 div 调整固定的 div/nav 大小？

html - 使用 bootstrap4 的可滚动表体

javascript - Cakephp 中的 HTML 和 JavaScript

javascript - 如何使用 jquery 将内联样式与数据属性和浏览器前缀一起使用

css - 不能将标题和导航放在一起

css - 在图像上使用过渡时打开/关闭循环

html - 如何将样式类设置为 Django 表单中的选择字段

bootstrap-4 - Bootstrap Navbar 下拉菜单项右侧

©2024 IT工具网  联系我们