如何使用Bootstrap设计响应式推文样式?

时间:2017-05-05 13:28:54

标签: html css twitter-bootstrap-3

我是一名新开发人员,我正在尝试使用Bootstrap 3来设计响应式推文样式,我需要将其用于样式化推文列表。 样式应该是响应式的,如下图所示: enter image description here

我仍在努力设计它,类似于上图所示。那么请您告诉我如何使其响应并与图像中显示的原型类似。

以下是我的代码片段,您可以查看它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="\&quot;http://twitter.com/&quot;" 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>

0 个答案:

没有答案