CSS：Bottom-Bootstrapのページ区切り要素を中央揃えにする

これで、埋め込みビューを使用する角型アプリケーションを使用できます。それが重要かどうかはわかりませんが、通常のhtmlファイルの場合は、実際にどのように見えるかをすべての埋め込みファイルに置き換えました。とにかく、私は、ページの一番下に固定されたuib-pagination要素を水平に配置しようとしています。CSS：Bottom-Bootstrapのページ区切り要素を中央揃えにする

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<base href="/"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

<!-- Imports for my personal stylesheet as well as ui-bootstrap's and angular material's stylesheets go here--> 

</head> 
<body style="width:100vw; height:auto"> 
<div ng-app="app" layout-fill ng-cloak> 
    <div class="root-container" layout-fill style="width:100vw; height:auto padding:0; position: absolute;"> 
    <md-content layout="column" layout-fill style="width:100vw; height:auto"> 
    <md-toolbar style="width:100vw; height:auto"> 
     <div class="md-toolbar-tools"> 
     <md-button aria-label="Go Back"> Go Back </md-button> 
     <md-button class="md-raised" aria-label="Learn More"> Learn More </md-button> 
     </div> 
    </md-toolbar> 
    <md-tabs md-selected="vm.selectedIndex" md-border-bottom> 
     <md-tab label="Home"> </md-tab> 
     <md-tab label="Submit"> </md-tab> 
     <md-tab label="Contact"> </md-tab> 
    </md-tabs> 
    <md-content class="main-body-content"> 
     <ul uib-pagination total-items="vm.itemCount" items-per-page="vm.itemsPerPage" ng-model="vm.currentPage" ng-change="log()" max-size="vm.maxShownPagination" class="pagination-lg" boundary-links="true" force-ellipses="true"> 
     </ul> 
    </md-content> 
    </div> 
    </md-content> 
</div> 
</div> 

<!---- scripts go here ----> 
</body> 
</html>

ここでコントラストと視野能力のために赤色、本体コンテンツの背景と私のスタイルシートです：

以下

.main-body-content { 
    height: 100vh; 
    width: 100vw; 
    background: red; 
} 

.pagination-lg { 
    position: fixed; 
    bottom: 0px; 
    width: 100vw; 
    margin-left: auto; 
    margin-right: auto; 
}

はスクリーンショットです：

することができますようにページ区切り要素はページの下部にあり、ビューポートと共にスクロールしますが、水平に配置されていないことを確認してください。助けて？ CSSが新しくなりました。

出典

2017-08-31 RudolphRedNose

あなたは角材料を使用している場合は、マテリアルデザイン

https://github.com/Crawlink/material-angular-paging

に基づいて、ページネーションのためのライブラリーの下に使用することができますそれはかなり持っている角度ブートストラップを使用するよりも、角材料のスタイルとうまく行くだろう全く違うスタイル。

下記のコードはGithubページから抜粋したものです。改ページ要素は既に水平に整列されています。

var app = angular.module("DemoApp", ['ngMaterial', 'cl.paging']); 
 
app.controller("MainController", ['$scope', function($scope) { 
 

 
    $scope.currentPage = 0; 
 

 
    $scope.paging = { 
 
    total: 100, 
 
    current: 1, 
 
    onPageChanged: loadPages, 
 
    }; 
 

 
    function loadPages() { 
 
    console.log('Current page is : ' + $scope.paging.current); 
 

 
    // TODO : Load current page Data here 
 

 
    $scope.currentPage = $scope.paging.current; 
 
    } 
 

 
}]);

<!doctype html> 
 
<html ng-app="DemoApp"> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 
 
     <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script> 
 
     <script src="https://rawgit.com/Crawlink/material-angular-paging/master/build/dist.min.js"></script> 
 
    <script src="example.js"></script> 
 
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 
 
    </head> 
 
    <body> 
 

 
<div ng-controller="MainController" flex layout="column"> 
 
    <section flex> 
 
     <md-content layout-padding=""> 
 
     <h1>Material Angular Paging demo</h1> 
 
     <div>Loaded data form Page <strong>{{currentPage}}</strong></div> 
 

 
     </md-content> 
 
    </section> 
 

 
    <section layout="row" layout-padding=""> 
 

 
     <cl-paging flex cl-pages="paging.total" , cl-steps="6" , cl-page-changed="paging.onPageChanged()" , cl-align="center center" , cl-current-page="paging.current"></cl-paging> 
 

 
    </section> 
 

 
    </div> 
 
</div> 
 
    </body> 
 
</html>

出典

2017-08-31 19:03:10

おかげで、私はそれをチェックアウトし、あなたに戻って取得します。私が満足すれば、私はあなたにupvote – RudolphRedNose

を教えてあげます。それがどうなるか教えてください。 –

角質マテリアルとUIブートストラップとの間に互換性の問題があることはわかりませんでした。 – RudolphRedNose

CSS：Bottom-Bootstrapのページ区切り要素を中央揃えにする

答えて

関連する問題