2017-11-27 7 views
0

내 웹 페이지의 스타일을 지정하고 정렬하기 위해 부트 스트랩과 의미 체계의 조합을 사용하고 있습니다. 현재 내 페이지를 정렬하는 데 문제가 있습니다. 페이지 전체에 걸쳐 api 맵과 블로그 게시물이 함께 표시됩니다. 이미지와 같이 서로 위에 겹쳐서 표시됩니다. enter image description here부트 스트랩 맞춤

여기 내 기본 코드는 node.js를 사용하고 있습니다. 즉시 .col-md-9 요소를 닫는 것 같은뿐만 아니라 EJS

<% include ../partials/header %> 

<div class="container-show"> 
    <div class="row"> 
     <div class="col-md-3"> 
      <p class="lead">Neighborhood Inscope</p> 
      <div id="map"></div> 
     </div> 
     <div class="col-md-9"></div> 
      <div class="thumbnail"> 
       <div class="ui huge header"> 
        <%= blog.title %> 
       </div> 
       <img class="img-responsive" src="<%= blog.image %>" > 
       <p> 
        <strong>By <%= blog.author.username %></strong> 
       </p> 
       <div class="content"> 
        <span><%= blog.created.toDateString() %></span> 
       </div> 
       <div class="description"> 
        <p><%- blog.body %></p> 
       </div> 
       <% if(currentUser && blog.author.id.equals(currentUser._id)){ %> 
        <a class="ui orange mini basic button" href="/blogs/<%= blog._id %>/edit">Edit</a> 
        <form id="delete-form" action="/blogs/<%= blog._id %>?_method=DELETE" method="POST"> 
         <button class="ui red mini basic button">Delete</button> 
        </form> 
       <% } %>    
      </div> 
     </div> 
     <div class="well"> 
      <div class="text-right"> 
       <a class="btn btn-success" href="/blogs/<%= blog._id %>/comments/new">Add new comment</a> 
      </div> 
     <% blog.comments.forEach(function(comment){ %> 
      <div class="row"> 
       <div class ="col-md-12"> 
        <h5 id="comment-date" class="pull-right"> 
        <%= comment.created.toDateString() %> 
        </h5> 
        <strong><%= comment.author.username %> </strong> 
        <p><%= comment.text %></p> 
      <% if(currentUser && comment.author.id.equals(currentUser._id)){ %> 
       <a class="btn btn-xs btn-warning" 
        href="/blogs/<%= blog._id %>/comments/<%= comment._id %>/edit"> 
         Edit 
       </a> 
       <form id="delete-mini-button" action="/blogs/<%= blog._id %>/comments/<%= comment._id %>?_method=DELETE" method="POST"> 
        <input type="submit" class="btn btn-xs btn-danger" value="Delete"> 
       </form> 
      <% } %> 
       </div> 
      </div> 
      <% }) %> 
      </div> 
     </div> 
    </div> 
</div> 

답변

1

보인다.