Я пытался заставить эту работу работать с сеткой начальной загрузки для отображения моего содержимого, но все не работает, когда я пытаюсь добавить в нее определенные функции.Я думаю, что все делаю правильно, но так как я новичок в начальной загрузке, я думаю, что, возможно, не знаю чего-то, с чем сообщество может мне помочь.
Вот код для справки, чем я объясню, что яделаю и чего хочу добиться.Пожалуйста, не пугайтесь, увидев код, его очень легко понять, сотрудничайте.
Это мой фрагмент из base.html
<div class="container">
<div class="row"> <!-- 1 -->
<div class="col-lg-12 col-xs-12 col-md-12"> <!-- 1 Adding Site Title -->
<center><h1 class="Heading"><a href="/" style="text-decoration: none !important">Suman Mishra</a></h1></center>
<hr>
</div> <!--Closing Col -->
</div> <!--Closing Row -->
<div class="row"> <!-- 2 -->
<div class="col-lg-12 col-xs-12 col-md-12">
<center>
<ul>
<li>
<a href="" class="wide" style="text-decoration: none !important">Home</a>
</li>
<li>
<a href="" class="wide" style="text-decoration: none !important">Categories</a>
</li>
<li>
<a href="" class="wide" style="text-decoration: none !important"> Nothing to display</a>
<li>
<a href="" class="wide" style="text-decoration: none !important"> Bhai Kuch bhi</a>
</li>
</ul>
</center>
<hr>
</div> <!-- Closing Column -->
</div> <!-- Closing Row -->
<div class="row"> <! -- 3 -->
<div class="col-md-9">
{% block content%}
{% endblock %}
</div> <!-- Closing Column -->
<div class="col-md-3"> <!-- 4 -->
{%block searchbar %}
{% endblock %}
</div> <!-- Closing Column -->
</div> <!-- Closing row -->
</div> <!-- Closing container -->
Этоmy {% block content%} , который будет размещен в base.html.
{% for post in posts %}
<div class="row">
<div class="col-lg-12 col-xs-12 col-md-12">
<h2 class="mt-4"><a href="/" style="text-decoration: none !important">{{post.title}}</a></h2>
<!-- Author -->
<div id="info">
<p>
by
<a href="/authors/{{post.author}}" style="text-decoration: none !important">{{post.author}} </a>
| {{post.published_date.date}}</p>
</div>
<hr>
<!-- Preview Image -->
{% if post.image %}
<img class="img-fluid rounded" src="{{post.image.url}}" alt="Image Placeholder">
{% endif %}
<hr>
<!-- Post Content -->
<p class="lead">{{post.get_summary | safe}}</p><button class="btn btn-default"><a href="/{{post.slug}}">Read More</a></button>
<hr>
<p>Related Topics</p>
{% for tag in post.tags.all %}
<button class="TagButton"><a href="/tags/{{tag}}">{{tag}}</a></button>
{% endfor %}
<hr>
</div>
</div>
{% endfor %}
{% endblock %}
И мой {% block searchbar%} выглядит следующим образом.
{% block searchbar %}
<div class="row">
<div class="col-md-12 col-lg-12 col-md-12">
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!
</button>
</span>
</div>
</div>
</div> <!-- Closing Card -->
</div> <!-- Closing Column -->
</div> <!-- Closing Row -- >
{% endblock %}
Мой пользовательский css, который я использую, blog-post.css , все остальное - просто загрузочный cdn и API шрифтов Google.
body {
padding-top: 54px;
font-family: 'Actor',sans-serif;
}
@media (min-width: 992px) {
body {
padding-top: 56px;
}
}
#fb-icon{
color: #3b5998;
text-shadow: 1px 1px 1px #ccc;
font-size: 1.5em;
}
#twitter-icon{
margin-top: 3px;
color: #00aced;
text-shadow: 1px 1px 1px #ccc;
font-size: 1.5em;
}
#info{
display: inline;
}
p, a span {
color: #000;
}
#heading{
align-items: center;
font-family: verdana;
position: relative;
}
#NavBarDummy{
align-items: center;
color:black;
font-family: verdana,'Actor',sans-serif;
}
center{
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
a{
color: black;
}
h2 a:hoover{
color: golden !important;
}
li a {
width: inherit;
}
.TagButton{
border-radius: 500px;
}
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Я хочумоя страница выглядит так.https://imgur.com/a/NdknD9l Однако в настоящее время это выглядит так, панель поиска добавляется под сообщением в блоге, чего явно не должно быть.https://imgur.com/a/92kx24E
Я старался быть максимально четким, добавил изображения и комментарии.Пожалуйста, помогите.
Редактировать: В комментарии № 1: Я строю строку и посвящаю всю ширину (12 столбцов) заголовку сайта.
В комментарии № 2: Яя делаю еще одну строку, в которой я посвящаю всю ширину (12 столбцов) панели навигации, которую я сделал самостоятельно из li и ul
В комментарии № 3: я делаю другую строку, из которой яОбрезаю два раздела шириной 9 столбцов и один из 3 столбцов, раздел 9 столбцов должен содержать мое основное содержание сообщения блога, которое представляет собой не что иное, как {% block content%}, а раздел 3 столбцов должен содержать панель поиска, однакоРаздел 3 столбца просто добавляется ниже раздела 9 столбца, а не в той же строке.
Редактировать 2
Скриптовая ссылка: https://jsfiddle.net/y2b4upzr/