[英]how to make the last div column stay on the top of the page in mobile view?
我将div分为4列，第一列有前一页按钮箭头，第二列和第三列包含内容，最后一列包含下一页按钮箭头。 但在移动视图中，最后一列箭头位于页面底部，我需要将其放置在靠近上一个按钮箭头的顶部。
<div class="container">
<div class="row">
<div class="col-md-1">
<form>
<input type="button" class="default_previous sprite" alt="Submit">
</form>
</div>
<div class="col-md-4">
<div class="container-two-grid">
<div class="grid-two imageandtext">
<figure>
<div class="imageandtext image_grid">
<label for="selimg1">
<img src="assets/images/painting.jpg" class="img-thumbnail">
</label>
<input type="radio" name="selimg" id="selimg1">
<div class="caption">
<p>Painting</p>
</div>
</div>
<div class="imageandtext image_grid">
<label for="selimg2">
<img src="assets/images/photography.jpg" class="img-thumbnail" >
</label>
<input type="radio" name="selimg" id="selimg2">
<div class="caption">
<p>Photography</p>
</div></div>
</figure>
</div>
<div class="grid-two imageandtext">
<figure>
<div class="imageandtext image_grid">
<label for="selimg3">
<img src="assets/images/drawing.jpg" class="img-thumbnail">
</label>
<input type="radio" name="selimg" id="selimg3">
<div class="caption">
<p>Drawing</p>
</div>
</div>
<div class="imageandtext image_grid">
<label for="selimg4">
<img src="assets/images/sculpture.jpg" class="img-thumbnail" >
</label>
<input type="radio" name="selimg" id="selimg4">
<div class="caption">
<p>Sculpture</p>
</div></div>
</figure>
</div>
<div class="grid-two imageandtext">
<figure>
<div class="imageandtext image_grid">
<label for="selimg5">
<img src="assets/images/painting.jpg" class="img-thumbnail">
</label>
<input type="radio" name="selimg" id="selimg5">
<div class="caption">
<p>Painting</p>
</div>
</div>
<div class="imageandtext image_grid">
<label for="selimg6">
<img src="assets/images/photography.jpg" class="img-thumbnail" >
</label>
<input type="radio" name="selimg" id="selimg6">
<div class="caption">
<p>Photography</p>
</div></div>
</figure>
</div>
<div class="grid-two imageandtext">
<figure>
<div class="imageandtext image_grid">
<label for="selimg7">
<img src="assets/images/drawing.jpg" class="img-thumbnail">
</label>
<input type="radio" name="selimg" id="selimg7">
<div class="caption">
<p>Drawing</p>
</div>
</div>
<div class="imageandtext image_grid">
<label for="selimg8">
<img src="assets/images/sculpture.jpg" class="img-thumbnail" >
</label>
<input type="radio" name="selimg" id="selimg8">
<div class="caption">
<p>Sculpture</p>
</div></div>
</figure>
</div>
</div>
</div>
<div class="col-md-6">
<div class="container-form-grid">
<div class="subject_art">
<form>
<select class="mdb-select">
<option value="" disabled selected>Subject of ART</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</form>
</div>
<form class="form-inline">
<h4>Dimensions</h4>
<select class="mdb-select">
<option value="" disabled selected>Units</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</form>
<form class="form-inline">
<div class="md-form form-group">
<input type="text" id="form1" class="form-control">
<label for="form1" class="">Width</label>
</div>
<div class="md-form form-group">
<input type="text" id="form1" class="form-control">
<label for="form1" class="">Height</label>
</div>
<div class="md-form form-group">
<input type="text" id="form1" class="form-control">
<label for="form1" class="">Depth</label>
</div>
</form>
<form>
<div class="form_weight">
<div class="md-form">
<input type="text" id="form41" class="form-control">
<label for="form41" class="">Weight</label>
</div>
</div>
</form>
<form class="form-inline">
<h4>ART Specifics</h4>
<div class="form_row">
<ul>
<li>
<select class="mdb-select">
<option value="" disabled selected>Medium</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</li>
<li>
<select class="mdb-select">
<option value="" disabled selected>Material</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</li>
<li><select class="mdb-select">
<option value="" disabled selected>Styles</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select></li>
</ul>
</div>
</form>
<form>
<div class="md-form form-width">
<input type="text" id="form1" class="form-control">
<label for="form1" class="">Keywords/Tags (Type 5 to 20 items) </label>
</div>
</form>
</div>
</div>
<div class="col-md-1">
<form>
<input type="button" class="default-next sprite" alt="Submit">
</form>
</div>
</div>
</section>
css（上一个按钮和下一个按钮）
.uploadart_content .default-next{
width: 83px;
height: 65px;
margin-right: 8px;
display: inline-block;
vertical-align: middle;
background-position: -71px -235px;
margin-top: 341px;
border:none;
outline: none;
}
.uploadart_content .default_previous{
width: 83px;
height: 65px;
margin-right: 8px;
display: inline-block;
vertical-align: middle;
background-position: -139px -235px;
margin-top: 341px;
border:none;
outline: none;
}
您可以使用移动宽度的媒体属性在css中执行此操作：
@media all and (max-width:767px){
.row{
position: relative;
padding-top:30px;//the height of your arrows
}
.row .col-md-1{
position: absolute;
top: 0;
}
.row .col-md-1:first-child{
left:0;
}
.row .col-md-1:last-child{
right:0;
}
}
或者你可以停止使用bootstrap float left并开始使用display：flex。 您可以使用order属性将最后一个子项添加到第二个位置
或者，您也可以添加隐藏的col下一个按钮，该按钮将在移动设备中显示。
<div class="col-md-1"><!-- your current previous button -->
<form>
<input type="button" class="default_previous sprite" alt="Submit">
</form>
</div><!-- your current previous button -->
<div class="col-md-1 hideondesktop"><!-- Added Next button -->
<form>
<input type="button" class="default-next sprite" alt="Submit">
</form>
</div><!-- Added Next button -->
...other cols
...other cols
...other cols
<div class="col-md-1 hideonmobile"><!-- editedNext button -->
<form>
<input type="button" class="default-next sprite" alt="Submit">
</form>
</div><!-- edited Next button -->
CSS
.hideondesktop{
display:none;
}
@media all and (max-width:767px){
.hideondesktop{
display:block;
}
.hideonmobile{
display:none;
}
}
希望这个帮助。
无论访问者滚动的页面有多低，如何使DIV停留在屏幕顶部？
[英]How do I make a DIV stay at the top of the screen no matter ow far down the page my visitor scrolls?
调用时如何实现可位于任何Chrome浏览器页面顶部的窗口或div？
[英]How to implement a window, or div, that can stay on top of any Chrome browser page, when invoked?
如何使一个div始终位于视图的底部并根据底部div调整顶部div的大小？
[英]How to make one div always be at the bottom of the view and make top div resize based on bottom div?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.