Question

我有三行布局。我希望第一行有一列跨越xs大小的所有12列。在较大的尺寸，我想要两列，一列9列宽，一列3列宽。我试图通过添加第二列并使其隐藏在xs和隐藏处以及在sm处隐藏3个宽。

但是，出于某种原因，这样做会在较大的屏幕尺寸下破坏我的第二行的布局。我不确定为什么。

在添加隐藏列之前代码正常工作：

＆＃13;

<!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>

＆＃13;

添加隐藏列后代码被破坏：

＆＃13;

<!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>

＆＃13;

Answer 1

我似乎已经找到了解决方案。我将要隐藏的列设置为小，中，大，并在小屏幕或更大的屏幕上设置为3列。

我还在具有clearfix类的行之间添加了一个div。

<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="visible-sm visible-md visible-lg col-sm-3">
        <div id="logo">
          <p>This is the hidden area</p>
        </div>

      </div>

    </div>

    <div class="clearfix"></div>

    <div class="row-fluid">
      <!-- rest of the code from before -->

隐藏列打破了以下行的布局

1 个答案: