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

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

bootstrap-4 html

Dicky Raambo · 技术社区 · 7 年前

我有我的模板上的评论部分,我使用 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 回复 | 直到 7 年前

Zac 7 年前

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

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

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

Obsidian Age 7 年前

你要添加 .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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前