Question

我有以下HTML结构：

＆＃13;

#jobrow1{
  height:20%;
  font-size:18px;
  padding-top:5px;
  padding-left:5%;
  color:white;
}
#jobrow2{
  padding-left:5%;
}
#jobcol1{
  background-color:black;
}
#jobcol2{
  color:black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="row" id="jobrow1">
  <div class="col-sm-8" id="jobcol1">Description</div>
  <div class="col-sm-4" id="jobcol2">Budget</div>
</div>

<div class="row" id="jobrow2">
  <div class="col-sm-8">
    ssssssssssssss	
  </div>
  <div class="col-sm-4">
    <button type="button" class="btn btn-success">
      Fai I'Offeria
    </button>
  </div>
</div>

＆＃13;

在PC /大屏幕中，div #jobcol2（包含单词＆＃34; Budget＆＃34;）显示在＆＃34; Fai I＆＃39; Offeria＆＃34;按钮，但当屏幕小于800px时，描述介于＆＃34;预算＆＃34;和按钮。我想要＆＃34;预算＆＃34;始终显示在按钮顶部。

如何更新我的代码或样式#jobcol2才能实现此目标？

Answer 1

最快的解决方案：使用col-xs-*代替col-sm-*。现在您正在使用应用于768px及更高屏幕的col-sm-*。由于您没有指定col-xs-*类，因此当屏幕小于768像素时，div将占据整个宽度。

以下是它的外观示例：

＆＃13;

#jobrow1{
  height:20%;
  font-size:18px;
  padding-top:5px;
  padding-left:5%;
  color:white;
}
#jobrow2{
  padding-left:5%;
}
#jobcol1{
  background-color:black;
}
#jobcol2{
  color:black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="row" id="jobrow1">
  <div class="col-xs-8" id="jobcol1">Description</div>
  <div class="col-xs-4" id="jobcol2">Budget</div>
</div>

<div class="row" id="jobrow2">
  <div class="col-xs-8">
    ssssssssssssss	
  </div>
  <div class="col-xs-4">
    <button type="button" class="btn btn-success">
      Fai I'Offeria
    </button>
  </div>
</div>

＆＃13;

即使屏幕小于768像素，＆＃34;预算＆＃34;将显示在按钮上。

如果您想要的是div在小屏幕中占据100％，那么您应该重新构建HTML。现在你正在＆＃34;在行中思考＆＃34;什么时候你应该＆＃34;思考专栏＆＃34;。这是您目前的结构：

[ DESCRIPTION-TITLE | BUDGET ]
[ DESCRIPTION       | BUTTON ]

如果你重新组织这样的代码：

[ DESCRIPTION-TITLE | DESCRIPTION ]
[ BUDGET            | BUTTON      ]

然后您可以将第一个组放置col-sm-8，将第二个组放置col-sm-4，当屏幕小于768px时，您将获得说明标题下方的说明和预算标题下方的按钮

像这样：

＆＃13;

#jobrow1{
  height:20%;
  font-size:18px;
  padding-top:5px;
  padding-left:5%;
  color:white;
  background-color:black;
}    
#jobcol2{
  height:20%;
  font-size:18px;
  padding-top:5px;
  color:black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="row">
  <div class="col-sm-8" id="jobcol1">
    <div id="jobrow1">Description</div>
    <div>ssssssssssssss</div>
  </div>
  <div class="col-sm-4" id="jobcol2">
    <div>Budget</div>
    <div>
      <button type="button" class="btn btn-success">Fai I'Offeria</button>
    </div>
  </div>
</div>

＆＃13;

如何使用Bootstrap根据窗口大小定位div？

1 个答案: