代码之家 › 专栏 › 技术社区 › Dicky Raambo

使用float right的bootstrap 4遇到了垂直问题

bootstrap-4 html

Dicky Raambo · 技术社区 · 6 年前

我有我的模板上的评论部分,我使用 w-75 float-right 但另一个专栏被拉到了我的评论一边。

这是我的模板代码。

      <div class="col-md-12 mb-3">
      ....
        <!-- comments with no parrent -->
        <div class="card mb-3">
          <div class="card-body">
          ....
          </div>
        </div>

        <!-- comments with parrent -->
        <div class="card mb-3 w-75 float-right">
        ....
        </div>
        <br>
      </div>

      <!-- comments Form -->
      <div class="col-md-12 mb-5">
        ....
      </div>

我不喜欢这样

2 回复 | 直到 6 年前

Zac 6 年前

而不是 <div class="card mb-3 w-75 float-right">

将左边距设置为auto,这将把这个div元素一直推到右边,并使左边的区域保持空白。

这样地: <div class='card mb-3 w-75 ml-auto">

Obsidian Age 6 年前

你要添加 .row w-75 类,并将父级更改为 col-md-7 offset-md-5 (总共12个)。这允许您的卡在桌面屏幕上偏移(没有任何元素强行进入左侧),并在移动屏幕上正确堆叠。

这可以在下面(单击 Run code snippet 然后 Full page 要查看偏移):

body {
  margin: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-md-12 mb-3">
    ....
  </div>
</div>

<div class="row">
  <div class="col-md-12 mb-3">
    <!-- comments with no parent -->
    <div class="card mb-3">
      <div class="card-body">
        ....
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-7 offset-md-5">
    <!-- comments with parent -->
    <div class="card mb-3">
      <div class="card-body">
        ....
      </div>
    </div>
    <br>
  </div>
</div>

<div class="row">
  <!-- comments Form -->
  <div class="col-md-12 mb-5">
    ....
  </div>
</div>

推荐文章

seriously · 按钮中元素的对齐

2 年前

USK · 引导模型在我的HTML文件中不起作用

2 年前

onit · 如何在单击按钮时从页面(引导程序4)隐藏或删除搜索表单?

2 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

2 年前

user9644796 · 如何检查折叠的导航栏是否打开?

6 年前

JoeSlav · 使用引导上载损坏的文件

6 年前

John · 引导程序4,表单内联未在XS视图上对齐

6 年前

J. Sparks · 奇怪的图像定位(HTML、CSS、Bootstrap)

6 年前

user9719859 · 如何在bootstrap 4中更改选择选项programmaticaly?

6 年前

im5an · 如何使用angular在单行中显示徽标和导航栏?

6 年前