Я хочу веб-сайт с тремя элементами подряд. Где первый и третий занимают значительно меньше места, чем средний. (col-2 против col-8, говоря на bootstrap). Всякий раз, когда я добавляю position:fixed к "меньшим элементам", они оба появляются в левой части экрана с надписью "средний элемент". Как я могу это исправить?
/* 1) All parts that of the page.html*/
.text_container {
margin-top: 4.5em;
margin-bottom: 4.5em;
}
body {
background-color: rgb(227, 242, 253);
float: left;
line-height: 1.25;
}
a {
color: black;
}
a:hover {
color: grey;
}
.wrapper {
width: 100%;
margin: 0;
}
/*3) All the parts that belong to the carousel */
.right {
width: 15%;
float: right;
position: fixed;
}
.left {
width: 15%;
float: left;
position: fixed;
}
.main {
width: 1300px
}
#CarouselContent {
justify-content: center;
}
.carousel-item {
width: 100%;
font-size: 13px;
margin-bottom: 6em;
}
.page {
width: 500px;
float: left;
margin: 0.03em;
padding: 4px;
background-color: rgba(255, 255, 255, 0.8);
}
<div xmlns="http://www.w3.org/1999/xhtml" data-template="templates:surround" data-template-with="templates/page.html" data-template-at="content">
<head>
<title>How it is supposed to look</title>
</head>
<body>
<div class="container-fluid">
<div class="row d-flex d-md-block flex-nowrap wrapper">
<nav class="col-md-2 float-left col-1 pl-0 pr-0" id="sticky-sidebar">
<h2>Table of Content</h2>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</nav>
<div class="col-md-8 float-left col px-5 pl-md-2 pt-2 main">
<div id="carouselContent" class="carousel slide" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="carousel-item">
We need some sample-text, normally I use exist-DB and insert data following a template
</div>
<div class="carousel-item">
Second set of sample text
</div>
</div>
</div>
</div>
<nav class="col-md-2 float-left col-1 pl-0 pr-0" id="sidebar">
<h2>Table of Content</h2>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</nav>
</div>
</div>
<nav class="navbar fixed-bottom">
<a class="carousel-control-prev what" href="#carouselContent" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true" />
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next what" href="#carouselContent" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true" />
<span class="sr-only">Next</span>
</a>
</nav>
</body>
</div>
примечания: предыдущий / следующий логи c нормально работают, но не во фрагменте, конечно, поскольку они сильно влияют на приложение, которое я используйте для вставки данных. То же самое относится и к тому, что во фрагменте выглядит как два оглавления. Я использую другой шаблон для ввода данных, я просто хотел получить некоторые рабочие данные для вас.
Мне нужно, чтобы эти div.left и div.right были исправлены ...