javascript - Bootstrap 对齐

Question

我正在使用 Bootstrap 和语义 UI 的组合来设计和对齐我的网页。目前，我在将页面 api map 和博客文章在整个页面上对齐时遇到问题，而不是像图像所示 那样堆叠在一起。

这是我的底层代码，我使用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>

Answer 1

看起来您要立即关闭 .col-md-9 元素。