質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

0回答

324閲覧

Bootstrapのcarousel/次の→を押すとページが中途半端な場所で止まる

chiiiiii

総合スコア23

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2019/04/16 10:14

前提・実現したいこと

現在Bootstrapでcarouselスライダーを正しく表示したい。
また、bootstrapのcarouselにしたのに携帯画面にした時に大きさが大きいままです。

cloud9でLaravelを使用して実装しております。

発生している問題・エラーメッセージ

次の→ボタンを押すと画像が中途で止まってしまいます。 下記のURLが現時点です。 https://gyazo.com/9a88296cb32941a8b99394f6dc22de85

html

<div class="row"> <div class="col-md-12"> <div id="carousel_top"> <div class="carousel"> <div id="carousel-sample" class="carousel slide" data-ride="carousel"> <!-- 以下は画像下部の○○○の部分の設定--> <!-- class="active"で初期に表示される画像を設定している--> <ol class="carousel-indicators"> <li data-target="#carousel-sample" data-slide-to="0" class="active"></li> <li data-target="#carousel-sample" data-slide-to="1"></li> <li data-target="#carousel-sample" data-slide-to="2"></li> <li data-target="#carousel-sample" data-slide-to="3"></li> </ol> <!--画像スライドの中身--> <ul class="slides slide-list carousel-inner carousel-sampl_list"> <li class="slide-item carousel-item active"> <img class="d-block" alt="" src="{{ asset('storage/img/01.jpg') }}"> <div class="carousel-caption"></div> </li> <li class="slide-item carousel-item"> <img class="d-block" alt="" src="{{ asset('storage/img/02.jpg') }}"> <div class="carousel-caption"> </div> </li> <li class="slide-item carousel-item"> <img class="d-block" alt="" src="{{ asset('storage/img/03.jpg') }}"> <div class="carousel-caption"></div> </li> <li class="slide-item carousel-item"> <img class="d-block" alt="" src="{{ asset('storage/img/04.jpg') }}"> <div class="carousel-caption"></div> </li> </ul> <a class="carousel-control-prev" href="#carousel-sample" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel-sample" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> </div> </div>

css

.slide_spring_list { margin: 0 auto; padding-left: 0px; max-width: 100%; max-height: 100%; } .slide-item.carousel-item { position: relative; overflow: hidden; width: 100%; height: 100%; margin: 0 auto; text-align: center; }

試したこと

デペロッパーツールで原因を探したのですがわかりませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

_Victorique__

2019/04/16 10:18

単に中央揃えされてないだけではないでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問