Question

我正在网页中实现引导网格。现在，我想在2个grid-columns / divs之间设置分隔线。以实现我可以轻松使用border-right属性，但是当网页处于移动视图xs or sm中时，该属性将不足。因此，我想要一个视图和分隔线，以便在较大的视图中列具有边界右边界的分隔线，而在移动视图中，列具有边界右边界的分隔线。所附图片可能更好地讲述了这个故事。

桌面视图是-

“移动”视图看起来像..

现在，我将提供为实现此功能而实施的脚本-

"use strict";

function isBreakpoint( alias ) {
    return $('.device-' + alias).is(':visible');
}

if( isBreakpoint('xs') ) {
  $('.cdiv').css('border-bottom', 'none');
    $('.cdiv').css('border-bottom', '1px dotted black');

}
if( isBreakpoint('sm') || isBreakpoint('md') ||isBreakpoint('lg') ) {
  $('.cdiv').css('border-bottom', 'none');
    $('.cdiv').css('border-right', '1px dotted black');

}


var waitForFinalEvent = function () {
      var b = {};
      return function (c, d, a) {
        a || (a = "I am a banana!");
        b[a] && clearTimeout(b[a]);
        b[a] = setTimeout(c, d);
      };
    }();

var fullDateString = new Date();


$(window).resize(function () {
    waitForFinalEvent(function(){

        if( isBreakpoint('xs') ) {
           $('.cdiv').css('border-right', 'none');
           $('.cdiv').css('border-bottom', '1px solid black');       
        }
      if( isBreakpoint('sm') || isBreakpoint('md') ||isBreakpoint('lg') ) {
        $('.cdiv').css('border-bottom', 'none');
        $('.cdiv').css('border-right', '1px solid black');
      }

    }, 300, fullDateString.getTime());

});

现在的问题是-尽管我正在获得所需的功能-它非常不一致，也就是说-例如，不同边界之间的过渡需要大量时间并且显示出不一致，有时两个边界会同时出现或有时出现尽管应该显示border-right时，我的屏幕已进入区域，但border-bottom仍然存在

任何帮助找出不同边界在不同尺寸之间的平滑过渡..

"use strict";
function isBreakpoint( alias ) {
    return $('.device-' + alias).is(':visible');
}

if( isBreakpoint('xs') ) {
  $('.cdiv').css('border-bottom', 'none');
    $('.cdiv').css('border-bottom', '1px dotted black');
  
}
if( isBreakpoint('sm') || isBreakpoint('md') ||isBreakpoint('lg') ) {
  $('.cdiv').css('border-bottom', 'none');
    $('.cdiv').css('border-right', '1px dotted black');
  
}


var waitForFinalEvent = function () {
      var b = {};
      return function (c, d, a) {
        a || (a = "I am a banana!");
        b[a] && clearTimeout(b[a]);
        b[a] = setTimeout(c, d);
      };
    }();

var fullDateString = new Date();


$(window).resize(function () {
    waitForFinalEvent(function(){

        if( isBreakpoint('xs') ) {
           $('.cdiv').css('border-right', 'none');
           $('.cdiv').css('border-bottom', '1px dotted black');       
        }
	  if( isBreakpoint('sm') || isBreakpoint('md') ||isBreakpoint('lg') ) {
		$('.cdiv').css('border-bottom', 'none');
		$('.cdiv').css('border-right', '1px dotted black');
	  }

    }, 300, fullDateString.getTime());
					 
});

.cdiv h3{
	color: navy;
}
button{
	margin-top: 10px;
	position: absolute;
	right: 0;
	bottom: 1;
}

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content=="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Q8</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="./q8.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="q8res.js"></script>
</head>
 
<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>
<body>
	<div class="container-fluid">
		<div class="row" style="padding: 10px;">
			<div class="col-sm-4 col-xs-12 cdiv">
				<h3>Latest News</h3>
				<p style="margin-bottom: 20px;"> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum .</p>
				<div class="btdiv" style="margin-top: 10px;"><button class="btn-primary">More</button></div>
			</div>
			<div class="col-sm-4 col-xs-12 cdiv">
				<h3>Feel free to Communicate</h3>
				<p style="margin-bottom: 20px;"> Donec tellus elit, lobortis ac velit non, scelerisque facilisis quam. Morbi sagittis risus sed pellentesque eleifend. </p>
				<button class="btn-primary">More</button>
			</div>
			<div class="col-sm-4 col-xs-12">
				<h3>Our Facilities</h3>
				<p style="margin-bottom: 20px;"> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</p>
				<button class="btn-primary">More</button>
			</div>
		</div>
	</div>
</body>
</html>

使用JavaScript

0 个答案: