Question

在移动设备上，边栏显示在我的产品上方。我希望它会影响我的产品。侧栏在左侧，内容在右侧。还有一个比我在此处创建边栏更好的方法。 https://jsfiddle.net/3pLnc4y1/

<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>   
<div class="row">
	<div class="col-md-2">
		Home/Categories
	</div>
	<div class="col-md-10">
<h2>My shop</h2>
<div class="row">
<div class="col-md-3">
	sdsd
</div>
<div class="col-md-3">
	sdsd
</div>
<div class="col-sm-3">
	sdsd
</div>
<div class="col-sm-3">
	sdsd
</div>
</div>
	</div>
</div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Answer 1

最简单的方法是使用Flexbox。我在这里为您创建了一个示例Codepen：https://codepen.io/CWSites/pen/pqGowo

您可以根据自己的喜好编写代码，为简单起见，我仅作了一些说明。

<div class="container">
  <div class="sidebar">
    Sidebar Here
  </div>
  <div class="content">
    Hello World
  </div>
</div>

CSS是神奇的地方。您将需要一个包含一些div样式且应用了一些flex样式的div才能使用flexbox。您的侧边栏和内容div也将需要自己的一些flexbox代码。在我的示例中，我为600px及以下的屏幕设置了媒体查询，但您可以根据自己的喜好进行调整。

开始时，您会希望侧边栏顺序为1，因此显示的顺序是从左到右，但是在较小的屏幕上，我翻转了flexbox顺序，因此侧边栏现在为2，内容为1。

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.sidebar {
  width: 30%;
  order: 1;
}

.content {
  width: 70%;
  order: 2;
}

@media only screen and (max-width: 600px) {     
  .container {
    flex-direction: column;
  }

  .sidebar {
    order: 2;
  }

  .content {
    order: 1;
  }
}

使用Flexbox时，我发现此guide非常有用。

Answer 2

使用必须使用使用订单类实用程序：

文档：https://getbootstrap.com/docs/4.2/layout/grid/#reordering

JsFiddle ：https://jsfiddle.net/b9ejhstw/1/

HTML ：

<div class="row">
    <div class="col-xs-12 col-md-10 order-md-last">   <!-- <--- HERE  --->
<h2>My shop</h2>
<div class="row">
<div class="col-md-3">
    sdsd
</div>
<div class="col-md-3">
    sdsd
</div>
<div class="col-sm-3">
    sdsd
</div>
<div class="col-sm-3">
    sdsd
</div>
</div>
    </div>
    <div class="col-xs-12 col-md-2">
        Home/Categories
    </div>
</div>

如何使此侧边栏在移动设备上失效

2 个答案: