ブートストラップの作成方法カルーセル前/次のボタンがカルーセルの全高に及んでいないのですか？

Question

カルーセルの高さ全体に及ばないようにブートストラップカルーセルのボタンを更新する方法を知っている人はいますか？私は、カルーセルの右手/左手エリア全体ではなく、矢印が存在しクリック可能であることを望みます。

ご協力いただければ幸いです。

Answer 1

カスタムスタイルをCSSに追加して、それを達成できます。

最初に、特定の幅/高さをcarousel-control要素に設定して、カルーセルの高さ全体に及ばないようにします。

.carousel-control { 
    width: 40px; 
    height: 40px; 
    top: 50%; 
    transform: translateY(-50%); 
} 

あなたがこれを実行した後、矢印ナビゲーションの背景の画像は、私はおそらくそれだけでなく非表示にします少しオフに見えるかもしれません。

.carousel-control.left, 
.carousel-control.right { 
    background-image: none; 
} 

最後の手順は、カルーセルに垂直に中央に配置することです。

.carousel-control .glyphicon-chevron-left, 
.carousel-control .glyphicon-chevron-right { 
    margin: 0; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

私はデモのために試してみました。 https://jsfiddle.net/swsalim/rx5zxd20/2/