0
私は、ブートストラップとセマンティクスUIの組み合わせを使用して、私のウェブページのスタイルを整えます。私は現在、私のページを整列する問題を抱えています。ページの向こう側に、apiマップとブログポストを一緒に重ねて表示しています。ブートストラップアライメント
ここに私の根底にあるコードは、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>