0
3行のレイアウトがあります。最初の行にxsサイズの12列すべてにまたがる1つの列があるようにしたいと思います。より大きなサイズでは、幅が9列、幅が3列の2列が好きです。私は2番目の列を追加し、それをxsとvisibleで非表示にし、smで3つの幅にすることでこれを試みました。次の行のレイアウトが非表示の列で壊れる
しかし、そうすることで何らかの理由で大きな画面サイズで2行目のレイアウトが壊れてしまいます。なぜ私は分からない。
非表示の列を追加する前に、作業コード：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="../styles/StyleSheet1.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12">
<div id="header">
<h1>This will be the page header</h1>
<ul class="nav nav-tabs">
<li class="active"><a href="Home.html">Home</a></li>
<li><a href="No_Sidebar.html">Page w/o Sidebar</a></li>
<li><a href="#">Menu Item 3</a></li>
</ul>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-6 col-sm-3 col-sm-push-9">
<div id="side-bar">
This is the side bar
<ul class="list-group">
<li class="list-group-item active">item a</li>
<li class="list-group-item">item b</li>
<li class="list-group-item">item c</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div id="content">
<h2>This is the main content</h2>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-12">
<div id="footer">
This is the footer
</div>
</div>
</div>
</div>
</body>
</html>非表示の列を追加した後に壊れコード：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="../styles/StyleSheet1.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-9">
<div id="header">
<h1>This will be the page header</h1>
<ul class="nav nav-tabs">
<li class="active"><a href="Home.html">Home</a>
</li>
<li><a href="No_Sidebar.html">Page w/o Sidebar</a>
</li>
<li><a href="#">Menu Item 3</a>
</li>
</ul>
</div>
</div>
<div class="hidden-xs col-sm-3 visible-sm ">
</div>
</div>
<div class="row-fluid">
<div class="col-xs-6 col-sm-3 col-sm-push-9">
<div id="side-bar">
This is the side bar
<ul class="list-group">
<li class="list-group-item active">item a</li>
<li class="list-group-item">item b</li>
<li class="list-group-item">item c</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div id="content">
<h2>This is the main content</h2>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-12">
<div id="footer">
This is the footer
</div>
</div>
</div>
</div>
</body>
</html>