Bootstrap旋转木马雪佛龙没有正确对齐

Question

使用Bootstrap轮播。左右控件未对齐。正确的控制人字形工作正常，但左边是造成一些问题。当图像变大时，它似乎越来越低。我尝试过像这样使用CSS：

.carousel-control .icon-prev, .carousel-control .icon-next, 
.carousel-control .glyphicon-chevron-left, .carousel-control 
.glyphicon-chevron-right, .glyphicon-circle-arrow-left, 
.carousel-control .glyphicon-circle-arrow-left, 
.carousel-control .glyphicon-circle-arrow-right {
    display: inline-block;
    position: absolute;
    top: 50%;
    z-index: 5;
}

但这根本没有帮助。这是HTML脚本。有线索吗？

<script type="text/dust" id="posting-detail-template">
<nav class="posting-detail-navbar navbar navbar-default">
    <div class="container-fluid">
        <div class="row">
            <div class="backbutton">
                <button type="button" class="btn btn-default navbar-btn posting-detail-reset-button navbar-left">
                    <span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span> Back
                </button>
                <p class="navbar-text navbar-left"><b>{title} - ${price}</b></p>
            </div>
        </div>
    </nav>

    <div class="row">
        <div class="col-xs-7">
            <div class="posting-detail-carousel">
                <div class="container-fluid">
                    <h2>{title}</h2>
                        <div id="myCarousel" class="carousel slide" data-ride="carousel">
                            <!-- Indicators -->
                            <ol class="carousel-indicators">
                                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                <li data-target="#myCarousel" data-slide-to="1"></li>
                                <li data-target="#myCarousel" data-slide-to="2"></li>
                                <li data-target="#myCarousel" data-slide-to="3"></li>
                            </ol>

                            <!-- Wrapper for slides -->
                            <div class="carousel-inner" role="listbox">
                                <div class="item active">
                                    <img src="img/sample-apartment.jpeg" alt="Apartment" align="middle">
                                </div>

                                <div class="item">
                                    <img src="img/sample-apartment.jpeg" alt="Apartment" align="middle">
                                </div>

                                <div class="item">
                                    <img src="img/sample-apartment.jpeg" alt="Apartment" align="middle">
                                </div>

                                <div class="item">
                                    <img src="img/sample-apartment.jpeg" alt="Apartment" align="middle">
                                </div>
                            </div>

                            <!-- Left and right controls -->
                            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                </div>      
            </div>

                <div class="pull-right">
                    <div class="button-group posting-detail-buttons btn-group" role="group">
                        <button type="button" class="favorite btn btn-warning">
                            <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Favorite
                        </button>
                        <button type="button" class="contact btn btn-success">
                            <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact
                        </button>
                    </div>
                </div>

                <div class="posting-detail-list panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">{title} - ${price}</h3>
                    </div>
                    <div class="panel-body">
                        <ul class="list-group">
                            <li class="list-group-item"><b>Description:</b> {description}</li>
                            <li class="list-group-item"><b>Posted:</b> {date}</li>
                            <li class="list-group-item"><b>Number of Bedrooms:</b> {numBed}</li>
                            <li class="list-group-item"><b>Number of Bathrooms:</b> {numBath}</li>
                            <li class="list-group-item"><b>Number of Tenants:</b> {numTenants}</li>
                            <li class="list-group-item"><b>Location:</b> {city} - {zip}</li>

                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-xs-5">
                <div class="map">
                    <h3>Transit Directions</h3>
                    <iframe class="neighborhood-map" src="https://www.google.com/maps/embed/v1/directions?key=AIzaSyBNSSuICv6MPc13PfZ1Yu0KyDSsDG5eLJw
                    &origin={city}%2C%20CA%20{zip}
                    &destination=1600%20Holloway%20Ave%2C%20San%20Francisco%2C%20CA%2094132
                    &mode=transit
                    &zoom=12">
                </iframe>
                </div>
            </div>
    </div>
</script>