ブートストラップ - 適切

複数のアイテムを揃えるだから私は私のプロジェクトのためのブートストラップパネルを使用していますが、私は以下のようにデザインモックアップを持っている：ブートストラップ - 適切

崩壊アイコンを右する必要がありながら、プロファイルのテキストと、プログレスバーが整列しておく必要があり整列した。

これが現時点での私のマークアップです：

<div id="panelProfile" role="tab" class="panel-heading"> 
    <h4 class="panel-title">Profile</h4> 
    <div class="progress body-profile"> 
    <div class="progress-bar"> 
     <div class="progress-filled"></div> 
     <div data-bind="" class="progress-value"></div> 
    </div> 
    </div> 
</div>

私は、プロファイルのテキストと、プログレスバーの両方にフロートを追加しようとしたが、これは私にこれを与える：

これを処理するための最良の方法は何ですか（反応する必要があります）

出典

2016-05-09 Keith W.

div＃panelProfile内でdiv.rowを使ってみましたか？

<div id="panelProfile" role="tab" class="panel-heading"> 
    <div class="row"> 
     <div class="col-xs-2"> 
      <h4 class="panel-title">Profile</h4> 
     </div> 
     <div class="col-xs-8"> 
      <div class="progress body-profile"> 
       <div class="progress-bar"> 
        <div class="progress-filled"></div> 
        <div data-bind="" class="progress-value"></div> 
       </div> 
      </div> 
     </div> 
     <div class="col-xs-2"> 

     </div> 
    </div> 
</div>

出典

2016-05-09 22:09:41

このコードは完全にあなたのために動作します。
マイナスアイコンにpull-rightクラスを追加します。
:-)

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Case</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<style> 
 
.progress{ 
 
border-radius: 15px; 
 
    } 
 
    .circle-minus{ 
 
    width: 5px; 
 
    height: 3px; 
 
    border: 1px solid black; 
 
    border-radius: 50%; 
 
    padding: 1px 7px; 
 
    font-size: 14px; 
 
    } 
 
    .panel-heading{ 
 
    background-color: white ! important; 
 
    } 
 
    .panel-footer{ 
 
    background-color: white ! important; 
 
    } 
 
    body{ 
 
    padding-top: 15px; 
 
    } 
 
</style> 
 
<body> 
 
    
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
<div class="pull-right"> &nbsp; &nbsp; 50% &nbsp; &nbsp; <span class="circle-minus">-</span></div> 
 
    <div class="pull-left">Profile &nbsp; &nbsp; &nbsp; &nbsp; </div> 
 
     <div> 
 
    <div class="progress"> 
 

 
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" 
 
    aria-valuemin="0" aria-valuemax="100" style="width:50%"> 
 
    
 
    </div> 
 
</div> 
 
     </div> 
 

 

 
     </div> 
 
     <div class="panel-body" style="height: 250px;"></div> 
 
    <div class="panel-footer"><h5 class="text-center">View Complete Profile</h5></div> 
 
    </div> 
 
</div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

コーディングハッピー text-centerクラスを追加ビュープロフィール "センター" を作るためにプロフィール
でPull-leftクラスを追加します。

出典

2016-05-10 02:49:56

ブートストラップ - 適切

答えて

関連する問題