Question

我正在使用bootstrap。我有一个有三个块的行：

<div class="row">
    <div class="span3" id="B">...</div>
    <div class="span4" id="A">...</div>
    <div class="span3" id="C">...</div>
</div>

这三个块的排序方式为B，A，C。

如果屏幕宽度很小，则三个块每个都有一行，并且也按B，A，C排序。

但我希望将它们命名为

A
B
C

我该怎么做？

Answer 1

试试这个：

<div class="row">
    <div class="pull-left">
        <div class="span4 pull-right" style="margin-left:0px;">A</div>
        <div class="span3 pull-left" style="margin-left:0px;">B</div>
    </div>
    <div class="pull-right">
        <div class="span3">C</div>
    </div>
</div>

您可能需要稍微调整一下间距，但它应该在屏幕宽度较窄时为您提供所需的正确顺序。

Answer 2

我的回答非常简单，有效，并且不需要技能：

使您的HTML结构如下所示：

<div class="row">
    <div class="span1" id="B">...</div>
    <div class="span2" id="A">...</div>
    <div class="span3" id="B">...</div>
    <div class="span4" id="C">...</div>
</div>

现在，在您的<head>元素中包含以下内容：

<link rel='stylesheet' type='text/css' media="all and (min-width:1024px)" href='bigdevice.css' />
<link rel='stylesheet' type='text/css' media="all and (max-width:1024px)" href='smalldevice.css'>

smalldevice.css

中的

.span1 {display:none;}

bigdevice.css

中的

.span3 {display:none;}

Answer 3

试试这个，这是一个简单的例子。希望它可以帮到你。

  @media screen and (min-width: 320px)  and (max-width: 480px){
    #row{position: relative;color:#fff;}
   #B{background:#000;width:100%;height:50px;float:left;position: absolute;top:50px;}
  #A{background:#666;width:100%;height:50px;clear:both;position: absolute;top:0;}
  #C{background:#aaa;width:100%;height:50px;float:left;position: absolute;top:100px;}
  }

对于大屏幕，您不必隐藏任何元素。试着绝对定位它。

@media screen and (min-width:481px) {
    #row{position: relative;}
  #B{background:#000;width:100%;height:50px;}
  #A{background:#666;width:100%;height:50px;}
  #C{background:#aaa;width:100%;height:50px;}
  }

Answer 4

接近它的另一种方法是使用：

<html>
<head>
<style type="text/css">
@media all and (min-width: 1024px) {
.span3 {display:none;}
}
@media all and (max-width: 1024px) {
.span1 {display:none;}
}
</style>
</head>
<body>
<div class="row">
    <div class="span1" id="B">...</div>
    <div class="span2" id="A">...</div>
    <div class="span3" id="B">...</div>
    <div class="span4" id="C">...</div>
</div>
</body>
</html>

在Bootstrap中为响应式设计重新排序div

4 个答案: