Question

我一直在努力使用bootstrap网格来显示我的内容，但当我尝试添加某些功能时，事情并不起作用。我想我正在做正确的事情，但由于我是新手，我想我可能不知道社区可以帮助我的东西。

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

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

这是我的 {％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

我尽量保持清晰，添加图片和评论。请帮助。

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

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

在评论＃3＆amp;＃4中：我正在制作另一行，我从中切割宽度为9列，另外一列为3列的两个部分，9列部分应包含我的主要内容博客帖子只是{％block content％}而3列部分应该包含搜索栏，但是3列部分只是在9列部分下面而不是在同一行中。

修改2

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

Answer 1

首先：

你链接Bootstrap 2和4的顶部链接了Bootstrap CDN，所以我删除了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

Bootstrap网格输出与预期

1 个答案: