2016-10-28 10 views
0

ブートストラップパネル左私は私は私のニュース記事site.Iため、このブートストラップコードを持って、それを

.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;}
<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>

を中央にすることはできませんが、パネル左のクラスを使用している...しかし、私は方法がわかりませんそれを私のページの中心に置いています。私はマージンのプロパティやセンタークラスをブートストラップで試しましたが、結果は得られませんでした。 enter image description here

答えて

1

.left-panelの子divに次の2行を追加します。

.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>

:私は、新しいクラス .content_centerチェックスニペットを追加しました
関連する問題