スマホリスト表示 Bootstrap

環境


f:id:hrt0kmt:20151215091949p:plain


マークアップ

HTMLファイル

              <ul class="news-contents list-unstyled">
                <li>
                  <a class="clearfix" href="">
                    <div class="news-list">
                      <div class="list-img col-xs-4">
                        <img src="/img/top/sample.jpg" class="img img-responsive full-width" />
                      </div>
                      <div class="news-list-head col-xs-8">
                        <span class="news-list-tag label">tag name</span>
                        <span class="list-date">2015.12.25</span>
                      </div>
                      <h5 class="list-title">text in this area. text in this area.</h5>
                    </div>
                  </a>
                </li>
                <li>
                  <a class="clearfix" href="">
                    <div class="news-list">
                      <div class="list-img col-xs-4">
                        <img src="/img/top/sample.jpg" class="img img-responsive full-width" />
                      </div>
                      <div class="news-list-head col-xs-8">
                        <span class="news-list-tag label">tag name</span>
                        <span class="list-date">2015.12.25</span>
                      </div>
                      <h5 class="list-title">text in this area. text in this area.</h5>
                    </div>
                  </a>
                </li>
              </ul>

LESSファイル

//------------------------------- news list
.news {
  .news-contents {
    a {
      width: 100%;
      color: @color_text_black;
      position: relative;
      .news-list {
        .list-img {
        }
        .news-list-head {
          margin-bottom: 20px;
          .news-list-tag {
            font-size: @size_text_xs;
            width: 50px;
            padding: 5px;
            height: auto;
            background-color: @color_tag_orange;
            position: relative;
          }
          .list-date {

          }
        }
      }
    }
  }
}

//------------------------------- list data
.list-date {
  font-size: @size_text_sm;
  float: right;
  margin-top: 10px;
  color: @color_text_gray;
}