[英]Adding responsiveness in my html code using bootstrap
I'm struggling to add responsiveness to a certain section in my webpage using bootstrap. 我正在努力使用引导程序将响应性添加到网页中的特定部分。
In the above picture, when window size is anything other than lg in bootstrap (ie: md, sm or xs), I want to display description on top and picture on bottom. 在上图中,当窗口大小不是引导程序中的lg以外的其他值(即:md,sm或xs)时,我想在顶部显示说明,在底部显示图片。 The html and css code I have for this code is given below.
我为该代码提供的html和css代码如下。 Can someone help me here?
有人可以帮我吗?
HTML: HTML:
<script>
var background_img_url = "{{ now_running.render_tactics_pic() }}";
</script>
<section class="action">
<div class="container">
<a href="{{ url_for('.post', id=now_running.id) }}">
<div class="left-text">
<h4>{{ now_running.header }}</h4>
<p class="running-post">{{ now_running.body }}</p>
</div>
<div id="mainPost" class="right-image">
</div>
</a>
</div>
</section>
CSS code: CSS代码:
.action {
overflow: visible;
padding: 0px;
width: 100;
height: 400px;
background: #f2f2f2;
position: relative;
}
.action .left-text {
padding: 70px 0;
padding-right: 60px;
width: 50%;
}
.action .left-text h4 {
text-transform: uppercase;
font-size: 24px;
font-weight: 600;
letter-spacing: 1px;
}
.action .left-text p {
padding-top: 20px;
}
.action .left-text em {
font-size: 16px;
color: #aaa;
font-weight: 300;
font-style: normal;
}
.action .right-image {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-size: cover;
background-position: 0 0;
background-repeat: no-repeat;
}
JS code: JS代码:
$(function() {
console.log("Right here");
$('.action .right-image').css('background-image', 'url(' + background_img_url + ')');
});
Just add this to your HTML and it will be responsive. 只需将其添加到您的HTML中,它就会响应。
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <section class="action"> <div class="container"> <div class="row"> <div class="col-lg-6"> <h4>Header</h4> <p class="running-post">In the above picture, when window size is anything other than lg in bootstrap (ie: md, sm or xs), I want to display description on top and picture on bottom. The html and css code I have for this code is given below. Can someone help me here?</p> </div> <div id="mainPost" class="right-image col-lg-6"> <img class="img-responsive" src="https://www.thesun.co.uk/wp-content/uploads/2017/01/nintchdbpict000292801126.jpg?strip=all&w=960" /> </div> </div> </div> </section>
You need something like this??? 您需要像这样的东西吗???
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.