ブートストラップを使用して垂直ナビゲーションを作成します。コードは次のとおりです:
<!DOCTYPE html><html> <head> <title>demo</title> <meta charset="utf-8" /> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-theme.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3"> <h3>demo</h3> <ul class="nav nav-pills nav-stacked"> <li class="active"><a>个人信息</a></li> <li><a>教育背景</a></li> <li><a>作品展示</a></li> </ul> </div> <div class="col-md-9"> </div> </div> </div> <script src="http://cdn.bootcss.com/jquery/2.0.3/jquery.js"></script> <script src="js/bootstrap.js"></script> </body></html>
デバッグして、どのクラスが幅を制御しているかを確認します。
このクラスが他の場所でも使用されており、CSS を直接変更するのが不便な場合は、対応するタグ内で直接変更するだけです。
なぜ変更したいのか分かりません。
幅の制御はありません
自由に変更できます。
col-md-3
col-md-9
このレイアウト。
フレームワークを共有するアプローチは、
ただ実行するだけです。フォントの背景色。 。
ボトムパッド用。 。
コンポーネントでのみ表示されます。
幅と高さは決して重要ではありません。
bootstrapではレイアウト内にのみwidthがありますが、そこで変更することはできません。