ブートストラップネストされた行の問題は1行にありません

私は画像を必要とし、L1とL2は1つの行にあります... L2は常に画像のボトルトンにあります... なぜですか？私のネストされた行が正しいと思います...それはOKですか？ブートストラップネストされた行の問題は1行にありません

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/html"> 
<head> 
    <meta charset="UTF-8"> 
    <title>appLanding</title> 
    <link href="../css/bootstrap.css" rel="stylesheet"> 

</head> 
<body> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-1"> 
      <img src="face-03.jpg" class="img-rounded img-responsive" style="margin-top: 4%"> 
     </div> 
     <div class="col-xs-9 col-xs-offset-2"> 
      <div class="row"> 
       <div class="col-xs-12">L1</div> 
      </div> 
      <div class="row"> 
       <div class="col-xs-12">L2</div> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12" dir="rtl"> 
      <div style="height:120px;width:100%;overflow:auto;padding: 1%"> 
       As you can see, once there's enough text in this box, the box will grow scroll bars... that's why we 
       call it a scroll box! You could also place an image into the scroll box. 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

出典

2017-06-07 user3585139

あなたがBootstrap Media Alignmentの多くを使用することにしたいように見えます。

ここにはfiddleがありますが、提供したコードを確認するには、ブートストラップメディアアライメントを使用して変更してください。

img対応クラスが削除されていることに注意してください。追加すると、行が左に浮動します。

それが役立つかどうか教えてください。

.top { 
 
    margin-top: 10px; 
 
} 
 
#no-inline-styles { 
 
    height:120px; 
 
    width:100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<!-- EXAMPLE CODE STARTS --> 
 

 
<div class="container top"> 
 
<div class="media"> 
 
    <div class="media-left"> 
 
     <img class="media-object img-rounded" src="http://via.placeholder.com/140x100" alt="..."> 
 
    </div> 
 
    <div class="media-body"> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
     <h3>L1</h3> 
 
     </div> 
 
    </div> 
 
     <div class="row"> 
 
     <div class="col-md-6"> 
 
     <h3>L2</h3> 
 
     </div> 
 
    </div> 
 
    <div id="no-inline-styles"> 
 
       As you can see, once there's enough text in this box, the box will grow scroll bars... that's why we 
 
       call it a scroll box! You could also place an image into the scroll box. 
 
      </div> 
 
    </div> 
 
</div> 
 

 
</div> 
 

 

 
<!-- EXAMPLE CODE ENDS --> 
 

 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

出典

2017-06-08 04:15:36 jameswassinger

感謝の男...働いていました... – user3585139

ブートストラップネストされた行の問題は1行にありません

答えて

関連する問題