1
我很努力使用引導程序將響應性添加到我的網頁中的某個部分。使用引導程序在我的html代碼中添加響應能力
在上述圖像中,當窗口尺寸大於在引導LG的任何其他(即:MD,SM或XS),我想顯示在頂部和畫面上底部的描述。下面給出了這個代碼的html和css代碼。有人可以幫我嗎?
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代碼:
.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代碼:
$(function() {
console.log("Right here");
$('.action .right-image').css('background-image', 'url(' + background_img_url + ')');
});
哈哈,我愛你如何取代梅西換取羅納爾多。 – Aiko
哈哈哈拉馬德里;) –
是的。類似的一個。 – deepak