Question

有没有办法在不使用引导网格的情况下：

在较大的设备上

div.left在.header-wrapper
div.right在.header-wrapper

在小型设备上

将div.left和div.right叠加在彼此之上

<div class="container">
  <div class="header-wrapper">

    <div class="left"> This is some longer text that may not fit in-line with buttons</div>
    <div class="right">
      <a type="button" class="btn btn-default">Table</a>
      <a type="button" class="btn btn-default">Charts</a>
    </div>
  </div>

  <p>Some content here</p>

  <div class="header-wrapper">
    <div class="in-line">
      This would be an inline example
    </div>
    <div class="in-line">
      Divs will stack without media queries
    </div>
  </div>
</div>

没有媒体查询可以吗？例如，使用.left .right上的内联块来处理堆叠。（参见html代码中的内联示例）

是否可以左/右对齐内联块div？

Answer 1

我可能没有意识到你说的是什么，所以我使用了一点Flexbox和一个媒体查询，它看起来像你想要的我想。如果没有，请告诉我。顺便说一句，我以前讨厌媒体查询，因为它的语法很奇怪，闻起来很有趣，但我得出的结论是他们在这里是有充分理由的。

http://jsfiddle.net/zer00ne/p7rbpuac/

更改

.header-wrapper {
  border: 1px solid green;
  display: flex;
  justify-content: space-between;
}

 @media screen and (max-width:360px) {
   .header-wrapper {

  display: flex;
  flex-direction: column;
  justify-content: center;
  }
 }

Answer 2

正如其他人所说，你需要使用媒体查询。

试试这个（显然根据自己的喜好改变大小）：

.header-wrapper { width: 100%; }
.header-wrapper > div { width: 200px; height: 50px; }
.left { background: blue; float: left; }
.right { background: red; float: right; }

@media screen and (max-width: 768px ) { 
   .right { 
      float:left; 
      clear: left; 
   } 
}

在小于769px的屏幕上，类.right的框将被float: left;应用于它，这将导致它向左浮动。 clear: left;会使其在类.left的div下方堆叠。

div在大型设备上左右对齐，堆叠在小型设备上

2 个答案:

更改