1
申し訳ありませんこれは既に答えられている場合、私はそれを探しました。応答的な上に移動する列
12桁の応答性の高いレイアウトを作成しようとしています。すべての列が左に浮いています。問題は、幅100％の行を作成したことです。私は下に2つの列が必要でした。
カラム1：私は行の下に2列に配置されたデモ
ためのすべての要素である必要がありますアンカー
コラム2と、ナビゲーションメニューであるべきです。第1列はかなり短く、すべて下に移動しました。列2は、できるだけ上にとどまっています。私は高さにそれと関係があるのだろうかと思っています。だから私は両方の列を同じ高さにしました。助けてくれなかった。 私はまた、それを上に移動するには、デスクトップ上で良いようだが、携帯電話で悪く見える相対的に沈めて列を配置しようとしました。お知らせ下さい。
プロジェクトはここにある：http://codepen.io/hherbst86/pen/OpbEzq
CODE（CSSとHTML）：
CSS：
*{
box-sizing: border-box;
}
.template-body{
width: 100%;
min-width: 320px;
max-width: 1200px;
margin: 0 auto;
}
.row{
padding: 20px;
width: 100%;
min-height: 1px;
float: left;
}
.col{
min-height: 40px;
border-radius: 8px;
display: inline-block;
margin-right: -4px;
}
.col.one {width: 8.33333%;;}
.col.two {width: 16.66667%;}
.col.three {width: 25%;}
.col.four {width: 33.33333%;}
.col.five {width: 41.66667%;}
.col.six {width: 50%;}
.col.seven {width: 58.33333%;}
.col.eight {width: 66.66667%;}
.col.nine {width: 75%;}
.col.ten {width: 83.33333%;}
.col.eleven {width: 91.66667%;}
.col.twelve {width: 100%;}
@media (max-width: 768px){
.col{
width: 100% !important;
}
}
.col.three.index-panel{
list-style-type: none;
height: 2000px;
}
.index-panel ul{
list-style-type: none;
}
.index-panel ul li{
border: 1px solid black;
padding: 20px;
}
HTML：
<head>
<title>Title Goes Here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="styles/css/nascent.css">
<style type="text/css">
section {
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body class="template-body">
<div class="row">
<header>
<img class="nascent-header__logo-image" src="images/BovAcademy_logo_head.png">
<h1>Title Goes Here</h1>
<h3>Title Description</h3>
</header>
</div>
<div class="body-row row">
<div class="col three index-panel">
<nav class="index-panel">
<ul>
<li><a href="#group01">Accordions</a></li>
<li><a href="#group02">Alerts</a></li>
<li><a href="#group03">Badges</a></li>
<li><a href="#group04">Breadcrumbs</a></li>
<li><a href="#group05">Buttons</a></li>
<li><a href="#group06">Cards</a></li>
<li><a href="#group07">Carousels</a></li>
<li><a href="#group08">Dropdowns</a></li>
<li><a href="#group09">Forms</a></li>
<li><a href="#group10">Footers</a></li>
<li><a href="#group11">List Groups</a></li>
<li><a href="#group12">Modals</a></li>
<li><a href="#group13">Pagination</a></li>
<li><a href="#group14">Progress Bar</a></li>
<li><a href="#group15">Tables</a></li>
<li><a href="#group16">Typography</a></li>
</ul>
</nav>
</div>
<div class = "col nine demo-sections">
<section id="group01">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group02">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group03">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group04">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group05">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group06">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group07">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group08">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group09">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group10">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group11">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group12">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group13">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group14">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group15">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group16">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group17">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group18">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group19">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group20">
<span><a href="#top">Go to top</a></span>
</section>
</div>
</div>
<div class="row"></div>
</body>