我是一名新开发人员,我正在尝试使用Bootstrap 3来设计响应式推文样式,我需要将其用于样式化推文列表。 样式应该是响应式的,如下图所示:
我仍在努力设计它,类似于上图所示。那么请您告诉我如何使其响应并与图像中显示的原型类似。
以下是我的代码片段,您可以查看它here in Bootply:
<div class="continaer">
<div class="col-lg-12">
<div class="twitter-container">
<div class="col-sm-12 pull-right">
<div class="checkbox">
<label><input value="" type="checkbox">Select</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox">Saved</label>
</div>
</div>
<img class="profileImage img-responsive" src="http://placehold.it/400x400" alt="">
<a href="\"http://twitter.com/"" target="_blank">
@tweet.Name
</a>
<span class="username">ScreenName</span>
<div class="date">Creation Date</div>
<div class="tweetTxt">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et ma
</div>
<div class="col-sm-12">
<div class="col-sm-6">
<span class="label label-primary">Tag #1</span>
<span class="label label-primary">Tag #2</span>
</div>
<div class="col-sm-6 pull -right">
<div class="checkbox">
<label><input value="" type="checkbox">Retweeted</label>
</div>
<span class="label label-success">Retweet Count</span>
</div>
</div>
</div>
</div>
</div>