当方、初心者です。
Webアプリを作成したく、右側にLearning,Ajust,Edit,Fileのタブメニューを、左側にViewContorol、Measure,Settingのタブメニューを作成したいのですが療法がブラウザの中央に集まる状態になってしまいます。
どなたか何が間違ったかのご指摘と修正したHTMLのコードを記載の両方をお願いできませんでしょうか。
CSSはBootstrap4を使用しているつもりです。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> 9 <script type="text/javascript" src="js/jquery-3.4.1.slim.js"></script> 10 <script type="text/javascript" src="js/bootstrap.js"></script> 11</head> 12<body> 13 <div class="container-fiuid"> 14 <div class="container"> 15 <nav class="navbar navbar-expand-lg navbar-light bg-light"> 16 <a class="navbar-brand" href="#"></a> 17 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> 18 <span class="navbar-toggler-icon"></span> 19 </button> 20 <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> 21 <div class="navbar-nav"> 22 <div class="float-left"> 23 <a class="nav-item nav-link active" href="#">Learning</a> 24 <a class="nav-item nav-link active" href="#">Ajust</a> 25 <a class="nav-item nav-link active" href="#">Edit</a> 26 <a class="nav-item nav-link active" href="#">File</a> 27 </div> 28 </div> 29 </div> 30 </nav> 31 32<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 33<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> 34<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> 35</div> 36<div class="container"> 37 <nav class="navbar navbar-expand-lg navbar-light bg-light"> 38 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> 39 <span class="navbar-toggler-icon"></span> 40 </button> 41 <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> 42 <div class="navbar-nav"> 43 <div class="float-right"> 44 <a class="nav-item nav-link active" href="#">ViewControl</a> 45 <a class="nav-item nav-link active" href="#">Measure</a> 46 <a class="nav-item nav-link active" href="#">Setting</a> 47 </div> 48 </div> 49 </div> 50 </nav> 51 52<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 53<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> 54<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> 55</div> 56</div> 57</body> 58</html>
回答2件
あなたの回答
tips
プレビュー