#javascript #jquery #html #css #twitter-bootstrap
#javascript #jquery #HTML #css #twitter-bootstrap
Вопрос:
Я внедряю bootstrap grid на своей веб-странице. Теперь я хочу установить разделитель между 2 столбцами grid / divs .o добиться этого я мог бы легко использовать 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] amp;amp; 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] amp;amp; 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>