文本流出 bootstrap 4 卡答案

【问题标题】：text flows out of bootstrap 4 card文本流出 bootstrap 4 卡
【发布时间】：2016-06-07 16:53:31
【问题描述】：

我正在尝试在 bootstrap 4 卡的左侧和右侧放置两个单词...

但问题是：

文字“Choro”从卡体中流出……

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link href="custom.css" rel="stylesheet">
</head>
<body>
<div class="align-middle">
<div class="container">
            <div class="card card-1">
                <p class="card-text">




                <dl class="dl-horizontal">
                  <dt class="col-md-10 col-md-push-"><h1>Choro</h1></dt>
                  <dd class="col-md-1"><h1>Boy</h1></dd>
                 </dl>


                </p>                
            </div>
            </div>
            </div>

            </div>

<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
 </body>
</html>

custom.css 代码是：

.align-middle {
    margin-top: 25px;
    margin-bottom: 25px;
}

.card-1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
   transition: all 0.2s ease-in-out;
 }

我做错了什么？即使在卡片中放置另一个容器标签也不起作用

编辑

现在看起来：谢谢@G.L.P

【问题讨论】：

标签： html twitter-bootstrap css twitter-bootstrap-4 bootstrap-4

【解决方案1】：

只需对您的 HTML 结构进行一些更改，如下所示：Demo

你需要在card之后加上card-blockdiv

 <div class="card-text">    
        <div class="card-block">   
          <dl class="dl-horizontal">
            <dt class="col-md-10"><h1>Choro</h1></dt>
            <dd class="col-md-1">
              <h1>Boy</h1></dd>
          </dl>
        </div>
      </div>

编辑：.dl-horizontal 的左右边距为负值，因此更改类名/更新它：Demo

.dl-horizontal {
    margin-right: 0rem;
    margin-left: 0rem;
}

【讨论】：

谢谢...但它帮助不大...现在文本不再在卡片外，而是在卡片边界上...我想要它在里面...和col- md-push-1 是解决方案，但它在内部推动太多，我希望它少一点