Question

我想要图片，L1和L2在一行...... 但L2总是在画面中... 为什么？我认为我的嵌套行是正确的......是吗？

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

Answer 1

您希望使用更多Bootstrap Media Alignment。

这是一个fiddle来审核您提供的代码，但使用Bootstrap Media Alignment进行了修改。

请注意，img-responsive类已被删除。如果添加它会将行浮动到左侧。

如果有帮助，请告诉我。

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

bootstrap嵌套行问题不在一行中

1 个答案: