Предотвращение прокрутки боковых панелей col-md-3 @media min-width 992px - PullRequest
Новая
       16

Предотвращение прокрутки боковых панелей col-md-3 @media min-width 992px

0 голосов
/ 12 июня 2019

Я хочу, чтобы только центральная часть веб-сайта col-md-6 прокручивалась на среднем экране, таком как Facebook.Как мне добиться этого?sidebar one и sidebar two в jsfiddle должны оставаться фиксированными.моя скрипка

Ответы [ 2 ]

1 голос
/ 17 июня 2019

Если вы столкнулись с проблемой в IE и старых браузерах, используйте этот JS вместо «position: sticky» CSS. Пожалуйста, откройте код ниже в ПОЛНОМ ВИДЕ . 

(function($) {
	$.fn.sticky = function( options ) {
		var settings = $.extend({
			stickyTop : 0,
			stickyBottom : 0,
			widthLimit: 0,
			stickyClass: false,
			stickyParent: false
		}, options);
		return this.each( function() {
			var $ele = $(this);
			var eleTop, eleLeft, eleBottom, eleParBot, eleWid, winWid
			var r = function(){
				eleTop = $ele.offset().top - settings.stickyTop;
				eleLeft = $ele.offset().left;
				eleBottom = $ele.offset().top + $ele.innerHeight() + settings.stickyBottom;
				$eleParent = $ele.parents(settings.stickyParent) || $ele.parent();
				eleParBot = $eleParent.offset().top + $eleParent.innerHeight();
				eleWid = $ele.innerWidth();
				winWid = $(window).outerWidth();
				f();
			}
			var f = function(){
				var winTop = $(window).scrollTop();
				if(winTop >= eleTop && winWid > settings.widthLimit){
					$ele.css({
						'position': 'fixed',
						'top': settings.stickyTop,
						'left': eleLeft,
						'width': eleWid
					});
					if (settings.stickyClass != false) {
						$ele.addClass(settings.stickyClass);
					}
					if(winTop >= eleParBot-$ele.innerHeight()-settings.stickyTop+settings.stickyBottom){
						$ele.css('top', (winTop - eleParBot + $ele.innerHeight() - settings.stickyBottom) * -1);
					}
					else{
						$ele.css('top', settings.stickyTop);
					}		
				}
				else{
					$ele.removeAttr('style').removeClass(settings.stickyClass);
				}
			}
			r();
			$(window).scroll(f);
			$(window).resize(function(){
				$ele.removeAttr('style');
				r();
			});
		});
	}

}(jQuery));
$(document).ready(function() {
	$('.sidebar1').sticky({
		stickyClass: 'sticky',
		widthLimit: 767
	});
	$('.sidebar2').sticky({
		stickyTop: 50,
		stickyBottom: -50,
		stickyClass: 'sticky',
		widthLimit: 767
	});
	$('.sidebar3').sticky({
		stickyTop: 50,
		stickyBottom: 70,
		stickyClass: 'sticky',
		widthLimit: 767
	});
	$('.sidebar4').sticky({
		stickyTop: 0,
		stickyBottom: 70,
		stickyClass: 'sticky',
		widthLimit: 767
	});
	$('.sidebar5').sticky({
		stickyTop: 0,
		stickyBottom: 0,
		stickyClass: 'sticky',
		widthLimit: 767,
		stickyParent: '.parent-sticky'
	});
});
html {
	-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
	width: 100%;
	height: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h1, h2, h4 {
	margin: 0;
	padding: 0;
}
*, *:after, *:before{
	box-sizing: border-box;
}
body {
	font-family: 'Work Sans', serif;
	background-color: #fff;
	padding: 50px 0;    
	-webkit-font-smoothing: antialiased;
	background: #DD5E89; 
	background: -webkit-linear-gradient(to right, #F7BB97, #DD5E89); 
	background: linear-gradient(to right, #F7BB97, #DD5E89); 
}
.container{
	max-width: 960px;
	width: 100%;
	padding: 0 15px;
	margin: auto;
}
.title{
	position: relative;
	padding-bottom: 20px;
	margin-bottom: 35px;
}
.title:after{
	content: '';
	width: 50px;
	height: 4px;
	background: #fff;
	position: absolute;
	left: 0;
	bottom: 0;
}
.main-title .title{
	margin-bottom: 60px;
}
.main-title .title:after{
	margin: auto;
	right: 0;
	width: 100px;
}
h1{
	font-family: 'Ubuntu', sans-serif;
	font-size: 55px;
	color: #fff;
	font-weight: 500;
	text-align: center;
}
h2{
	font-family: 'Ubuntu', sans-serif;
	font-size: 40px;
}
h4{
	font-family: 'Ubuntu', sans-serif;
	font-size: 25px;
	font-weight: 500;
	color: #1d1d1d;
	padding-bottom: 15px;
}
.content-wrap{
	padding: 25px 25px 40px;
	background-color: #8647db;
	border-radius: 4px;
	color: #fff;
}
.text-wrap p{
	line-height: 26px;
	font-weight: 300;
	letter-spacing: 0.1em;
}
.btn-wrap{
	padding-top: 25px;
}
.btn-wrap a{
	font-size: 18px;
	line-height: 24px;
	padding: 10px 20px;
	color: #6231a6;
	font-weight: 500;
	background-color: #fff;
	border-radius: 3px;
	display: inline-block;
}
.sidebar{
	background: #fff;
	padding: 25px;
	border-radius: 4px;
	overflow-x: hidden;
}
.sidebar ul{
	padding: 0;
	margin: 0;
	list-style-type: none;
}
.my-list li{
	font-size: 14px;
	line-height: 24px;
	color: #fff;
	background-color: #6231a6;
	padding: 8px 20px;
	margin-bottom: 10px;
	border-radius: 3px;
	-webkit-transform: translate(150%, 0px);
	-moz-transform: translate(150%, 0px);
	-o-transform: translate(150%, 0px);
	-ms-transform: translate(150%, 0px);
	transform: translate(150%, 0px);
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.my-list li:last-child{
	margin-bottom: 0;
}
.my-list.rev li{
	-webkit-transform: translate(-150%, 0px);
	-moz-transform: translate(-150%, 0px);
	-o-transform: translate(-150%, 0px);
	-ms-transform: translate(-150%, 0px);
	transform: translate(-150%, 0px);
}
.my-list li:nth-child(1){
	transition-delay: 0.05s;
}
.my-list li:nth-child(2){
	transition-delay: 0.1s;
}
.my-list li:nth-child(3){
	transition-delay: 0.15s;
}
.my-list li:nth-child(4){
	transition-delay: 0.2s;
}
.sidebar.sticky .my-list li{
	-webkit-transform: translate(0%, 0px);
	-moz-transform: translate(0%, 0px);
	-o-transform: translate(0%, 0px);
	-ms-transform: translate(0%, 0px);
	transform: translate(0%, 0px);
}
.tags{
	padding-bottom: 15px;
}
ul.tags-wrap{
	margin-left: -3px;
	margin-right: -3px;
}
.tags-wrap li{
	font-size: 12px;
	line-height: 16px;
	color: #fff;
	border-radius: 3px;
	background-color: #36a631;
	padding: 5px 8px;
	margin: 3px;
}
.tags-wrap li.red{
	background-color: #de2342;
}
.main-container{
	margin-bottom: 70px;
}
.parent-sticky > .container{
	margin-bottom: 70px;
}
.parent-sticky > .container:last-child{
	margin-bottom: 0;
}
@media(max-width: 1024px){
	.sidebar.sidebar1 .my-list li,
	.sidebar.sidebar1 .my-list.rev li{
		-webkit-transform: translate(0%, 0px);
		-moz-transform: translate(0%, 0px);
		-o-transform: translate(0%, 0px);
		-ms-transform: translate(0%, 0px);
		transform: translate(0%, 0px);
	}
}
@media(max-width: 991px){
	.sidebar.sidebar2 .my-list li,
	.sidebar.sidebar2 .my-list.rev li{
		-webkit-transform: translate(0%, 0px);
		-moz-transform: translate(0%, 0px);
		-o-transform: translate(0%, 0px);
		-ms-transform: translate(0%, 0px);
		transform: translate(0%, 0px);
	}
}
@media(max-width: 767px){
	h1{
		font-size: 50px;
	}
	.sidebar{
		margin-top: 25px;
	}
	.sidebar .my-list li,
	.sidebar .my-list.rev li{
		-webkit-transform: translate(0%, 0px);
		-moz-transform: translate(0%, 0px);
		-o-transform: translate(0%, 0px);
		-ms-transform: translate(0%, 0px);
		transform: translate(0%, 0px);
	}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="main-container">
	<div class="container">
		<div class="row">
			<div class="col-md-8">
				<div class="content-wrap">
					<div class="title">
						<h2>Lorem Ipsum</h2>
					</div>
					<div class="text-wrap">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
						<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
						<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
					</div>
					<div class="btn-wrap">
						<a href="#">Read More</a>
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="sidebar sidebar1">
					<div class="tags">
						<h4>Sticky Properties</h4>
						<ul class="tags-wrap d-flex flex-wrap">
							<li>Top : 0</li>
							<li>Bottom : 0</li>
							<li>WidthLimit : 1024px</li>
							<li>StickyClass : sticky</li>
						</ul>
					</div>
					<ul class="my-list">
						<li>Lorem ipsum dolor sit amet</li>
						<li>Lorem ipsum dolor sit amet</li>
						<li>Lorem ipsum dolor sit amet</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="main-container">
	<div class="container">
		<div class="row flex-row-reverse">
			<div class="col-md-8">
				<div class="content-wrap">
					<div class="title">
						<h2>Lorem Ipsum</h2>
					</div>
					<div class="text-wrap">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
						<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
						<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
					</div>
					<div class="btn-wrap">
						<a href="#">Read More</a>
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="sidebar sidebar2">
					<div class="tags">
						<h4>Sticky Properties</h4>
						<ul class="tags-wrap d-flex flex-wrap">
							<li>Top : 50</li>
							<li>Bottom : 50</li>
							<li>WidthLimit : 991px</li>
							<li>StickyClass : sticky</li>
						</ul>
					</div>
					<ul class="my-list rev">
						<li>Lorem ipsum dolor sit amet</li>
						<li>Lorem ipsum dolor sit amet</li>
						<li>Lorem ipsum dolor sit amet</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="main-container">
	<div class="container">
		<div class="row">
			<div class="col-md-8">
				<div class="content-wrap">
					<div class="title">
						<h2>Lorem Ipsum</h2>
					</div>
					<div class="text-wrap">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
						<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
						<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
					</div>
					<div class="btn-wrap">
						<a href="#">Read More</a>
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="sidebar sidebar3">
					<div class="tags">
						<h4>Sticky Properties</h4>
						<ul class="tags-wrap d-flex flex-wrap">
							<li>Top : 50</li>
							<li class="red">Bottom : -70</li>
							<li>WidthLimit : 767px</li>
							<li>StickyClass : sticky</li>
						</ul>
					</div>
					<ul class="my-list">
						<li>Lorem ipsum dolor sit amet</li>
						<li>Lorem ipsum dolor sit amet</li>
						<li>Lorem ipsum dolor sit amet</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="main-container">
	<div class="container">
		<div class="row flex-row-reverse">
			<div class="col-md-8">
				<div class="content-wrap">
					<div class="title">
						<h2>Lorem Ipsum</h2>
					</div>
					<div class="text-wrap">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
						<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
						<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
					</div>
					<div class="btn-wrap">
						<a href="#">Read More</a>
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="sidebar sidebar4">
					<div class="tags">
						<h4>Sticky Properties</h4>
						<ul class="tags-wrap d-flex flex-wrap">
							<li>Top : 0</li>
							<li class="red">Bottom : -70</li>
							<li>WidthLimit : 767px</li>
							<li>StickyClass : sticky</li>
						</ul>
					</div>
					<ul class="my-list rev">
						<li>Lorem ipsum dolor sit amet</li>
						<li>Lorem ipsum dolor sit amet</li>
						<li>Lorem ipsum dolor sit amet</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="main-container parent-sticky">
	<div class="container">
		<div class="row">
			<div class="col-md-8">
				<div class="content-wrap">
					<div class="title">
						<h2>Lorem Ipsum</h2>
					</div>
					<div class="text-wrap">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
						<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
						<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
					</div>
					<div class="btn-wrap">
						<a href="#">Read More</a>
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="sidebar sidebar5">
					<div class="tags">
						<h4>Sticky Properties</h4>
						<ul class="tags-wrap d-flex flex-wrap">
							<li>Top : 50</li>
							<li>Bottom : 0</li>
							<li>WidthLimit : 767px</li>
							<li>StickyClass : sticky</li>
							<li>StickyParent : '.parent-sticky'</li>
						</ul>
					</div>
					<ul class="my-list">
						<li>Lorem ipsum dolor sit amet</li>
						<li>Lorem ipsum dolor sit amet</li>
						<li>Lorem ipsum dolor sit amet</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-8">
				<div class="content-wrap">
					<div class="title">
						<h2>Lorem Ipsum</h2>
					</div>
					<div class="text-wrap">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
						<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
						<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
					</div>
					<div class="btn-wrap">
						<a href="#">Read More</a>
					</div>
				</div>
			</div>
			<div class="col-md-4">

			</div>
		</div>
	</div>
</div>
<div class="main-container">
	<div class="container">
		<div class="content-wrap">
			<div class="title">
				<h2>Lorem Ipsum</h2>
			</div>
			<div class="text-wrap">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
			</div>
			<div class="btn-wrap">
				<a href="#">Read More</a>
			</div>
		</div>
	</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
1 голос
/ 12 июня 2019

Вы можете достичь этого, используя свойство css position

.content {
  position: relative;
}

.side1,
.side2 {
  position: -webkit-sticky!important;
  position: sticky!important;
  top: 0;
  word-break: break-all;
}
<!DOCTYPE html>
<html>

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>
<!-- ADD THE CLASS layout-top-nav TO REMOVE THE SIDEBAR. -->

<body class="hold-transition skin-black-light layout-top-nav">
  <div class="wrapper">

    <header class="main-header">
      <nav class="navbar navbar-static-top">
        <div class="container">
          <div class="navbar-header">
            <a href="../../index2.html" class="navbar-brand">Tester</a>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
              <i class="fa fa-bars"></i>
            </button>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse pull-left" id="navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                <input type="text" class="form-control" id="navbar-search-input" placeholder="Search">
              </div>
            </form>
          </div>
        </div>
        <!-- /.container-fluid -->
      </nav>
    </header>

    <!-- Full Width Column -->
    <div class="content-wrapper">
      <div class="container">
        <!-- Content Header (Page header) -->
        <section class="content-header"></section>

        <section class="content">
          <div class="row">

            <div class="col-xs-3 side1">
              <div class="box box-primary">
                <div class="box-header">
                  <h3 class="box-title">side bar one</h3>
                </div>
                <div class="box-body">

                  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>
                </div>
              </div>
            </div>


            <div class="col-xs-6 main1 ">
              <div class="box box-widget">
                <div class="box-body">
                  <!-- post text -->
                  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>

                  <p>the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                </div>
                <div class="box-body">
                  <!-- post text -->
                  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>

                  <p>the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                </div>
                <div class="box-body">
                  <!-- post text -->
                  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>

                  <p>the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                </div>
                <div class="box-body">
                  <!-- post text -->
                  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>

                  <p>the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                </div>
                <div class="box-body">
                  <!-- post text -->
                  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>

                  <p>the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                </div>
                <div class="box-body">
                  <!-- post text -->
                  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>

                  <p>the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                </div>
                <div class="box-body">
                  <!-- post text -->
                  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>

                  <p>the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                </div>
                <div class="box-body">
                  <!-- post text -->
                  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>

                  <p>the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                </div>
                <div class="box-body">
                  <!-- post text -->
                  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>

                  <p>the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                </div>
                <div class="box-body">
                  <!-- post text -->
                  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>

                  <p>the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                </div>
              </div>
            </div>


            <div class="col-xs-3 side2">
              <div class="box box-primary">
                <div class="box-header">
                  <h3 class="box-title">side bar two</h3>
                </div>
                <div class="box-body">

                  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>
                </div>
              </div>
            </div>

          </div>
        </section>
      </div>
      <!-- /.container -->
    </div>
 

  </div>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...