2017-10-25 4 views
2

私はデフォルトのレイアウトとそれを拡張する別のテンプレートを使用しています。私はmdbブートストラップ無料版を試していますが、正しく動作していません。私はヘッドレイアウトファイルのリンクに何か問題があると考えています。私もローカルでインストールしようとしましたが、それもうまくいきませんでした。おそらく私はここで何か基本的なものを逃しているかもしれません。MDBブートストラップが正しく機能しない

レイアウト:

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>dataMS</title> 
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css" rel="stylesheet"/> 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
    <link href="styles/site.css" rel="stylesheet"/> 
</head> 

テンプレート拡張レイアウト -

<div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel"> 
<!--Indicators--> 
<ol class="carousel-indicators"> 
    <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li> 
    <li data-target="#carousel-example-2" data-slide-to="1"></li> 
    <li data-target="#carousel-example-2" data-slide-to="2"></li> 
</ol> 
<!--/.Indicators--> 
<!--Slides--> 
<div class="carousel-inner" role="listbox"> 
    <div class="carousel-item active"> 
     <div class="view hm-black-light"> 
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide"> 
      <div class="mask"></div> 
     </div> 
     <div class="carousel-caption"> 
      <h3 class="h3-responsive">Light mask</h3> 
      <p>First text</p> 
     </div> 
    </div> 
    <div class="carousel-item"> 
     <!--Mask color--> 
     <div class="view hm-black-strong"> 
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide"> 
      <div class="mask"></div> 
     </div> 
     <div class="carousel-caption"> 
      <h3 class="h3-responsive">Strong mask</h3> 
      <p>Secondary text</p> 
     </div> 
    </div> 
    <div class="carousel-item"> 
     <!--Mask color--> 
     <div class="view hm-black-slight"> 
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide"> 
      <div class="mask"></div> 
     </div> 
     <div class="carousel-caption"> 
      <h3 class="h3-responsive">Slight mask</h3> 
      <p>Third text</p> 
     </div> 
    </div> 
</div> 
<!--/.Slides--> 
<!--Controls--> 
<a class="carousel-control-prev" href="#carousel-example-2" 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-example-2" role="button" data-slide="next"> 
    <span class="carousel-control-next-icon" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
</a> 
<!--/.Controls--> 

+0

https://mdbootstrap.com/content/bootstrap-images/#cards –

+1

ではなく、これがhttps://imgur.com/a/hCWVfになっている可能性があります。これは、ブートストラップ3とMDB 4.4.1 ?代わりにBS4を使ってみてください –

+0

@SebastianKaczmarekブートストラップで試してみましたが、ベータはうまくいきませんでした!それはより多くの不一致を与えている –

答えて

4

MDBは、ブートストラップ4 B4に基づいている間は、ブートストラップ3を使用しているが、ブートストラップ3との下位互換性がありませんしたがって、動作しません。ここから新しいパッケージをダウンロードしてください: https://mdbootstrap.com/getting-started/

あなたのコードを置くとうまくいきます。私はちょうどそれをテストしました。

関連する問題