2017-09-10 7 views
4

私はブートストラップには新しく、私が何か間違っているかどうかわかりませんが、class = "border border-danger"を取得できません。残りのすべてのスタイルはちゃんと動作します。これは私のコードです。ボーダーがブートストラップで動作していない4

<html lang="en"> 
 
    <head> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
     <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    </head> 
 
    <body class="container"> 
 
     <div class=" text-center m-2 text-primary"> 
 
      
 
      <h2 class="h4"> SAMPLE DATA FOR RENDERING </h2>  
 
      <blockquote class="blockquote bg-warning text-white p-2 border" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
       Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 
       Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - Lorem Ipsum</blockquote> 
 

 
      
 
     </div> 
 
     
 
     <div class=" border border-danger border"> 
 
      <p class="text-uppercase w-75" > Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p><br> 
 
      <button class="btn btn-primary btn-block"> Submit </button> 
 
     </div> 
 
     
 
    </body> 
 
</html>

このスニペットのための出力を以下に示します。 enter image description here

答えて

5

あなたはbootstrap4 alpha版を使用していると思います。このバージョンではborder-dangerは私の意見ではありません。 bootstrap4ベータ版を使用してください。

+1

、。今はうまくいきます。 –

0

誰かを助けるかもしれない。これらは私がそれを動作させるために使ったスタイルシートとスクリプトのバージョンです。私の問題を解決ブリリアント

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 

関連する問題