我知道这可能完全违背了网格系统和响应的整体思路,但我们假设我想要执行以下操作: 我的布局可以在下图中看到。 这个问题最初是整个图像+文本部分需要col-md-9
,并且twitter源需要col-md-2
跨度在1920x 1080屏幕上。但是,当像1280x800这样的较小分辨率的屏幕上显示时,我可以通过更改图像+文本部分来保持相同布局,以占用col-md-5
范围。所以我的问题是,是否有可能使用媒体查询来更改元素的col-md类?我知道CSS不能触及元素类,但我想可能bootstrap会带来一个解决方案。否则,我知道我可以使用JavaScript来获取窗口大小并交换类。 这里有一些你需要的代码。我不想发布任何不相关的代码,但如果你们需要整个事情,我可以设置一个jsfiddle prob。 谢谢! 1我可以在没有JS的情况下重新调整Bootstrap列跨度吗?
HTML:
<div class="newsfeed">
<div class="container">
<div class="row">
<div class="col-md-11 mainfeed">
<div class="row top-buffer">
<div class="col-md-3">
<img src="images/chris.jpg" width="190px" />
</div>
<div class="col-md-9">
<h2 class="pullup">Some text here</h2>
<p id="bodypart">Some more text here </p>
</div>
</div>
<div class="row top-buffer topborder">
<div class="col-md-3">
<img src="images/city.jpg" width="190px" height="280px" />
</div>
<div class="col-md-9">
<h2 class="pullup">Text text text</h2>
<p id="bodypart">Text....</p>
</div>
</div>
<div class="row top-buffer topborder">
<div class="col-md-3">
<img src="images/alex.jpg" width="190px" height="280px" />
</div>
<div class="col-md-9">
<h2 class="pullup">Some news text </h2>
<p id="bodypart">xxxxxxxxxxx
</p>
</div>
</div>
</div>
<div class="col-md-1 pull-right">
<!-- Tweet RRS-->
<div class="tweets pull-right">
<a class="twitter-timeline" href="https://twitter.com/sinanspd" data-widget-id="540693554432323584"
width="380px" data-chrome="transparent noscrollbar">Tweets by @sinanspd</a>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],
p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}
}(document,"script","twitter-wjs");
</script>
</div>
</div>
</div>
</div>
</div>
相关CSS:
/* ----------COMMON STYLING ------ */
body{
background-color: black !important;
}
.container{
width: 100%;
}
.jumbotron{
height: 340px;
background-size: cover;
background-image: url("images/banner.jpg");
background-repeat: no-repeat;
background-position: center;
}
.nav li{
display: inline;
margin-right: 130px;
}
#nomarginleft{
margin-right: 0px;
}
.nav a{
font-family: "Crimson Text";
font-size: 28px;
font-weight: bold;
z-index: 2;
text-decoration: none !important;
}
.pull-left{
margin-left: -350px;
margin-top: -30px;
}
.pull-right{
margin-right: -300px;
margin-top: -30px;
}
.nav{
background-color: black;
width: 100%;
}
.fixed {
position: fixed;
top: 0px;
height: 50px;
z-index: 1;
background-color: black;
}
/*--------------------- HOME PAGE ---------------- */
#display{
width: 960px;
height: 420px;
overflow: hidden;
margin: 30px auto 0px auto;
border-radius: 4px;
background-color: white;
}
#display ul{
position: relative;
margin: 0;
padding: 0;
height: 960px;
width: 420px;
list-style: none;
}
#display ul li{
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 960px;
height: 420px;
}
#head > p{
font-family: "Crimson Text";
font-size: 30px;
font-weight: bold;
}
#head{
margin-top: 30px;
margin-left: 220px;
}
.newsfeed{
width: 86%;
height: 800px;
margin-left: -160px;
}
.mainfeed{
margin-left: 130px;
}
.pullup{
margin-top: 0px;
}
.top-buffer{
margin-top: 20px;
}
.topborder{
border-top: 1px solid white;
}
.tweets{
background-color: rgba(247,12,12,0.3);
border: 1px solid white;
margin-left: 50px;
border-color: white;
}
@media (min-width: 1000px) and (max-width: 1300px){
.jumbotron{
height: 250px;
}
.nav li{
margin-right: 50px;
}
.nav a{
font-size: 25px;
}
.pull-left{
margin-left: -60px;
}
.pull-right{
margin-right: -40px;
}
#display{
width: 700px;
height: 350px;
}
#head > p{
font-size: 25px;
}
#head{
margin-top: 30px;
margin-left: 80px;
display: block;
}
.newsfeed{
width: 86%;
}
.newsfeed h2{
font-size: 20px;
}
.mainfeed{
margin-left: 230px;
}
.newsfeed h2, .newsfeed p{
margin-left: 0px;
}
.top-buffer{
width: 800px;
}
.newsfeed .pull-right{
margin-right: -120px;
}
.tweets{
margin-right: -500px;
}
}
实际上我只是有机会尝试它,它不起作用,它甚至在我的13“mac上使用col-lg,有什么想法? – sinanspd
因为显然Bootstrap将13“分类为lg屏幕 – sinanspd
这是真的。根据http://getbootstrap.com/css/#grid-options你的13“屏幕在lg下,在上面的代码中用ld替换md和md用sm。 – Aakash