bootstrap panel-left我无法居中

时间：2016-10-28 17:44:00

标签： javascript html css twitter-bootstrap

＆＃13;
＆＃13; 
.left-panel .panel-default{border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-bottom:2px #DDD solid;}
.left-panel .panel-default .panel-body {padding:0; margin:0;}
.left-panel .panel-default .panel-body .col-md-12{margin:0; padding:0;}
.left-panel .panel-default .panel-body .thumbnail{border:none; margin:0; padding:0; position:relative;}
.left-panel .panel:hover img {opacity:.8;}
.left-panel .panel-default .panel-body .icerik-bilgi{margin:30px;}
.icerik-bilgi .btn-primary{float:right; margin-bottom:30px;}
.icerik-bilgi h2{margin-bottom:30px; color:#333;}
.icerik-bilgi h2:hover{color:#E74C3C; text-decoration:none;}
.icerik-bilgi a:hover{text-decoration:none;}
.icerik-bilgi p{margin-bottom:30px; line-height:25px; font-size:16px;}
.icerik-bilgi .btn-group{float:left;}
.btn-group a{font-size:26px; color:#CCC;}
.btn-group .btn-facebook:hover{color:#3B5998;}
.btn-group .btn-twitter:hover{color:#55ACEE;}
.btn-group .btn-google:hover{color:#DD4B39;}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="left-panel">
            <div class="col-xs-12 col-sm-6 col-lg-8">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="col-md-12">
                            <div class="thumbnail">
                                <a href="#"><img src="http://www.istanbluegayrimenkul.com/wp-content/uploads/2014/05/image6.jpg" class="img-responsive" alt=""/></a>
                            </div>
                            <div class="icerik-bilgi">
                                <a href="#"><h2>Lorem ipsum dolor sit amet</h2></a>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut condimentum eget nunc quis semper. Nunc pellentesque nec libero sed viverra. Donec turpis velit, suscipit sit amet mauris quis, viverra ornare massa. Morbi tellus eros, fringilla eu sodales id, ultricies ut sapien. Duis et tristique enim, vitae mattis neque. Aliquam efficitur, dui id laoreet blandit, lorem […]</p>
                                <div class="btn-group">
                                    <a class="btn btn-social btn-facebook" href="#" data-toggle="tooltip" title="Share Facebook"><i class="fa fa-facebook"></i></a>
                                    <a class="btn btn-social btn-twitter" href="#" data-toggle="tooltip" title="Share Twitter"><i class="fa fa-twitter"></i></a>
                                    <a class="btn btn-social btn-google" href="#" data-toggle="tooltip" title="Share Google"><i class="fa fa-google"></i></a>
                                </div>
                                <a href="#">
                                    <button type="button" class="btn btn-primary">
                                        <span class="btn btn-google">Read More <i class="fa fa-chevron-right"></i></span>
                                    </button>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
＆＃13;
＆＃13;
＆＃13;

我的新闻文章网站有这个引导代码。我使用了面板左侧的课程...但我不知道如何将它放在我的页面中。我尝试过保证金属性或中心课程引导，但我没有得到一个结果。任何建议？  enter image description here

1 个答案:

答案 0 :(得分：1)

将以下两行添加到.left-panel的子div中。我添加了一个新的类.content_center检查代码段：

.content_center {
    margin: 0 auto;
    float: none;
}


.left-panel .panel-default{border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-bottom:2px #DDD solid;}
.left-panel .panel-default .panel-body {padding:0; margin:0;}
.left-panel .panel-default .panel-body .col-md-12{margin:0; padding:0;}
.left-panel .panel-default .panel-body .thumbnail{border:none; margin:0; padding:0; position:relative;}
.left-panel .panel:hover img {opacity:.8;}
.left-panel .panel-default .panel-body .icerik-bilgi{margin:30px;}
.icerik-bilgi .btn-primary{float:right; margin-bottom:30px;}
.icerik-bilgi h2{margin-bottom:30px; color:#333;}
.icerik-bilgi h2:hover{color:#E74C3C; text-decoration:none;}
.icerik-bilgi a:hover{text-decoration:none;}
.icerik-bilgi p{margin-bottom:30px; line-height:25px; font-size:16px;}
.icerik-bilgi .btn-group{float:left;}
.btn-group a{font-size:26px; color:#CCC;}
.btn-group .btn-facebook:hover{color:#3B5998;}
.btn-group .btn-twitter:hover{color:#55ACEE;}
.btn-group .btn-google:hover{color:#DD4B39;}
.content_center {margin: 0 auto; float: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="left-panel">
            <div class="col-xs-12 col-sm-6 col-lg-8 content_center">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="col-md-12">
                            <div class="thumbnail">
                                <a href="#"><img src="http://www.istanbluegayrimenkul.com/wp-content/uploads/2014/05/image6.jpg" class="img-responsive" alt=""/></a>
                            </div>
                            <div class="icerik-bilgi">
                                <a href="#"><h2>Lorem ipsum dolor sit amet</h2></a>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut condimentum eget nunc quis semper. Nunc pellentesque nec libero sed viverra. Donec turpis velit, suscipit sit amet mauris quis, viverra ornare massa. Morbi tellus eros, fringilla eu sodales id, ultricies ut sapien. Duis et tristique enim, vitae mattis neque. Aliquam efficitur, dui id laoreet blandit, lorem […]</p>
                                <div class="btn-group">
                                    <a class="btn btn-social btn-facebook" href="#" data-toggle="tooltip" title="Share Facebook"><i class="fa fa-facebook"></i></a>
                                    <a class="btn btn-social btn-twitter" href="#" data-toggle="tooltip" title="Share Twitter"><i class="fa fa-twitter"></i></a>
                                    <a class="btn btn-social btn-google" href="#" data-toggle="tooltip" title="Share Google"><i class="fa fa-google"></i></a>
                                </div>
                                <a href="#">
                                    <button type="button" class="btn btn-primary">
                                        <span class="btn btn-google">Read More <i class="fa fa-chevron-right"></i></span>
                                    </button>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

相关问题
最新问题