Question

我想在bootstrap中有一个可折叠的侧边栏。

为此，我希望内容和侧边栏之间有一个纤细的元素切换侧边栏（display属性）的可见性。请参阅以下示例：

而不是边框（如小提琴），我想要一个元素。我该怎么做？

Answer 1

解决方案是一个完整高度的简单div。可折叠侧边栏的整体解决方案：

(function($) {
    var url = 'http://divakarparashar.hol.es/innovation/mobile/protected/json/news.json';

    $.ajax({
        type: 'GET',
        url: url,
        async: true,
        jsonpCallback: 'MyJSONPCallback',
        contentType: "application/json",
        dataType: 'jsonp',
        success: function(json){
            $.each(json, function(i, j) {
                $("#links").append("<li><a href=" + j.link + " class='ui-btn ui-btn-icon-right ui-icon-carat-r'>" + j.text + "</li>");
                console.log(j.link + j.text);
                //used console.log to just run a check, same output there too
            });
        },
        error: function(e) {
            console.log(e.message);
        }
    });
})(jQuery);

Answer 2

这是执行此操作的代码。可以在https://jsfiddle.net/qaisarnadeem/zzs94oc1/

找到小提琴

<body>
  <div class="container-fluid fill">
    <div class="row fill">
      <div class="col-lg-2 col-md-4 col-xs-4" id="sidebar">
        <h4>
        Sidebar
      </h4>
      </div>
          <div class="pull-left vertical-elem"></div>
      <div class="col-lg-10 col-md-6 col-xs-6 text-center" id="content">
        <h3>
        Content
      </h3>
      </div>
    </div>
  </div>
</body>

这是课程vertical-elem

的CSS

.vertical-elem{
  height:100%;
  width:6px;
  background-color:blue;
}

bootstrap：超薄垂直元素，全高

2 个答案: