ブートストラップカルーセルのインジケータを右に移動できますか？

ブートストラップカルーセルのインジケータを右に移動できますか？ float: right;を使用しても実際には何も行われません。どちらもposition: relative; left: 300px;です。ブートストラップカルーセルのインジケータを右に移動できますか？

インジケータを右に移動する方法はありますか？それらを動かすことはどうですか？

出典

2016-12-23 Anonymous

私は、ブートストラップを使用しませんが、どのように位置について：絶対;トップ：0;左に300ピクセル。相対位置が親にあることを確認してください。 –

とleft: inherit;

.carousel-indicators { 
    text-align: right; 
    float: right; 
    right: 2% !important; 
    left: inherit; 
}

this bootplyは、あなたが探して何だと思います。

更新：あなたのコードであなたのために働かない理由は、の後に呼び出されるboostrap.cssを持っているので、インジケータを移動するのに使用しようとしているCSSを上書きしているためです。

これはあなたの<head>どのように見えるべきかである

<head> 
    <title>project</title> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" type="text/css" href="home.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://use.fontawesome.com/f86debf509.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

出典

2016-12-23 19:02:02 Bosc

@CRoverあなたはあなたのコードでテストされ、画像http://www.bootply.com/UPmI8IwH3A – Bosc

@CRoverあなたのコードはこのhttp://www.bootply.com/UPmI8IwH3Aで動作します。あなたは確かにカルーセルに影響を与える他のCSSはありませんか？ – Bosc

@CRoverそれはあなたのために働いていない理由を考え出したあなたのカスタムCSSの変更後に、 – Bosc

.carousel: { 
height: 100%; 
margin-bottom: 0px; 
margin: 0 auto; 
position: relative; 
}

インジケータのスタイルを変更します。あなたのコードでright:30px

.carousel-indicators { 
position: absolute; 
bottom: 10px; 
right:30px; 
z-index: 15; 
width: 60%; 
list-style: none; 
text-align: center; 
}

出典

2016-12-23 18:22:21 ab29007

を調整することができ、ヘッダは、おそらくあなたのカルーセル・インジケータを覆う、狭い画面でカルーセルの多くを覆っています。

ここでは、カルーセルを75px押し下げる謎です。

https://jsfiddle.net/Hastig/7n0pa1cq/

あなたは正しいと、この位置でのデフォルトのCSSを上書きすることができます。あなたはブートストラップCSSの前home.cssを呼んでいたので、あなたの変更が唯一の一種の働いていた

.carousel { 
    /* position is already relative by bootstrap default */ 
    top: 75px; /* because your header is fixed and has a height of 75px; */ 
} 
.carousel-indicators { 
    width: initial; /* initial resets css to default */ 
    margin-left: initial; 
    left: initial; 
    bottom: initial; 
    right: 10px; /*horizontal position */ 
    top: 100px; /* vertical position */ 
}

理由でした。 home.css内のブートストラップにないスタイルだけが変更に影響し、ブートストラップのCSS設定には最終的な単語がありました。

最後にhome.cssを置くと、ブートストラップのCSSが上書きされます。

あなたはのli要素を配置する text-align: right;を使用し、 .carousel-indicators{}クラスにカスタムCSSを使用する必要があり、その後、 right: 0;を設定

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://use.fontawesome.com/f86debf509.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
    <link rel="stylesheet" type="text/css" href="home.css">

出典

2016-12-23 18:35:24

@CRover可能であれば、カスタムCSSを投稿して、すべてが順番になっているかどうかを確認できます。変更に影響を与えようと試みるために、あなたが残した小さなものかもしれません。（私はいつもそれをする） –

@CRover私が去る前に私の悪い、私はフィドルを更新しませんでした。 https://jsfiddle.net/Hastig/7n0pa1cq/ヘッダーがカルーセルの上にあり、狭い画面幅のクーロッセルインジケーターを覆っていました。 –

@CRoverああ、それは難しいかもしれない。最新のFFやChromeをまだ使用していない場合は、別のブラウザを試すことをお勧めします。また、カスタムCSSファイルの古いバージョンをキャッシュしている可能性はありますか？ –

ブートストラップカルーセルのインジケータを右に移動できますか？

答えて

関連する問題