Question

请注意，我是开发人员，而不是设计师。

我需要在桌面模式下为两列分隔卡片div。我的意思是＆＃34;这应该在左侧＆＃34;应显示在左侧和＃34;这应该在右侧＆＃34;应显示在右侧。

我使用以下HTML。

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-block">
    <div class="col-md-4">
      This should be in Left Side
    </div>
    <div class="col-md-8">
      This should be on right side
    </div>

  </div>
</div>

如果你想在网上测试，那就是jsfiddle（https://jsfiddle.net/uxfjwhpc/1/）。

我的错误是什么以及如何纠正？

Answer 1

类col-*在row类下包装时有效。您可以在下面找到card-block div的更新代码。希望这会有所帮助。

<div class="card-block">
  <div class="row">
    <div class="col-md-4">
      This should be in Left Side
    </div>
    <div class="col-md-8">
      This should be on right side
    </div>
  </div>
</div>

Answer 2

<div class="row card-block">
    <div class="col-md-4">
      This should be in Left Side
    </div>
    <div class="col-md-8">
      This should be on right side
    </div>
</div>

这对你有用。

Answer 3

我在Bootstrap中在Card中添加Form时遇到同样的问题。这是我的实施。

从最初的bootstrap标准表单实现：

<form action="/action_page.php">
<div class="form-group">
  <label for="email">Email:</label>
  <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</form>

我需要调整它才能工作：

<form action="/action_page.php">
<div class="row">
  <label for="email" class="col-md-2">Email:</label>
  <input type="email" class="form-control col-md-10" id="email" placeholder="Enter email" name="email">
</div>  
</form>

我需要将 form-group 类更改为行类，以确保表单水平类在bootstrap卡内正常工作。

为什么col-md不能在bootstrap 4中使用内卡？

3 个答案: