2017-11-27 3 views
0

私は、ブートストラップとセマンティクスUIの組み合わせを使用して、私のウェブページのスタイルを整えます。私は現在、私のページを整列する問題を抱えています。ページの向こう側に、apiマップとブログポストを一緒に重ねて表示しています。enter image description hereブートストラップアライメント

ここに私の根底にあるコードは、node.jsを使用しています。同様に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

あなたはすぐに.col-md-9要素を閉じるように見えます。