引导网格输出与预期不同

Question

我一直在尝试使用引导网格来显示我的内容，但是当我尝试向其中添加某些功能时，事情就不起作用了。 我认为我做的事情是正确的，但由于我是新手，所以我想我可能不知道社区可以帮助我做什么。

这是供参考的代码，我将解释我在做什么以及我想要实现的目标。请不要害怕看到代码，它很容易理解，合作。

这是我来自 base.html

的 sn-p

<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 -->

这是我的 {% 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，剩下的只是 bootstrap cdn 和 google font api。

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

我试图尽可能清晰，添加了图像和 cmets。请帮忙。

编辑： 在评论 #1 中：我正在制作一行并将全宽（12 列）专用于网站标题。

在评论 #2 中：我正在制作另一行，其中我将全宽（12 列）专用于导航栏，这是我自己用 li 和 ul 制作的

在评论 #3 中：我正在制作另一行，从中我将剪切两个宽度为 9 列的部分和 3 列中的另一个部分，9 列部分应包含我的博客文章的主要内容，即除了 {% block content %} 和 3 列部分应该包含搜索栏，但是 3 列部分只是附加在 9 列部分下方而不是在同一行中。

编辑 2

小提琴链接：https://jsfiddle.net/y2b4upzr/

Answer 1

第一：

您在顶部链接 Bootstrap CDN 的位置链接了 Bootstrap 2 和 4，所以我删除了 Bootstrap 2。

第二：

您忘记在引导程序 4 链接末尾添加“/”结束标记。

第三：你有太多的 CSS。我从您的

中删除了所有 CSS

最后：

您的图片和搜索框需要在同一行中包含各自的列。

`<div class="row">
     <div class="col-6>
         <img src='place image url here'/>
     </div>
     <div class='col-6'>
         search stuff here
     </div>
 </div>`

here it is on jsfiddle