引导类对齐答案

【问题标题】：Bootstrap class alignment引导类对齐
【发布时间】：2017-01-27 04:59:36
【问题描述】：

我正在尝试使用带有以下 HTML 代码和输出的 bootstrap 4 卡类。但是，我希望 h5 中的文本位于“标题”旁边，以便全部为一行。我还希望该按钮与标题内联显示在右上角。我对样式有点陌生，所以我总是不知道什么时候是内联或新行。

<div class="card">
    <div class="card-block">
        <h4 class="card-title">Title</h4>
        <h5>-  smaller that should be beside main title</h5>
        <button class="card-title btn btn-primary pull-right">Button</button>
        <p class="card-text">Entry 1</p>
        <p class="card-text">Entry 2</p>
        <p class="card-text">Entry 3</p>
        <p class="card-text">Entry 4</p>
    </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您可以使用d-inline 类将它们显示为内联元素

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
  <div class="card-block">
    <h4 class="card-title d-inline">Title</h4>
    <h5 class="d-inline">- smaller that should be beside main title</h5>
    <button class="card-title btn btn-primary pull-right">Button</button>
    <p class="card-text">Entry 1</p>
    <p class="card-text">Entry 2</p>
    <p class="card-text">Entry 3</p>
    <p class="card-text">Entry 4</p>
  </div>
</div>

【讨论】：

我不认为引导类，你打败了我
@Naila 我也更喜欢只写 CSS！但是如果 OP 使用引导程序，他们可能应该使用这些类。顺便说一句，您的代码将按钮在标题旁边向上移动。
@Naila 哎呀！不知何故错过了那部分。
谢谢大家。为什么在这种情况下按钮需要 d-inline？
@user172902 为什么“没有” d-inline？我假设这是你的问题。 .d-inline 内联。但是.btn默认是inline-block。

【解决方案2】：

使用 put pull-left class 试试这个

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
    <div class="card-block">
        <h4 class="card-title pull-left">Title</h4>
        <h5 class=" pull-left">-  smaller that should be beside main title</h5>
        <button class="card-title btn btn-primary pull-right">Button</button>
        <div class="clearfix"></div>
        <p class="card-text">Entry 1</p>
        <p class="card-text">Entry 2</p>
        <p class="card-text">Entry 3</p>
        <p class="card-text">Entry 4</p>
    </div>
</div>

或者你也可以使用display:inline-block

.card .card-title,.card h5{ 
  display:inline-block;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
    <div class="card-block">
        <h4 class="card-title">Title</h4>
        <h5>-  smaller that should be beside main title</h5>
        <button class="card-title btn btn-primary pull-right">Button</button>       
        <p class="card-text">Entry 1</p>
        <p class="card-text">Entry 2</p>
        <p class="card-text">Entry 3</p>
        <p class="card-text">Entry 4</p>
    </div>
</div>

【讨论】：

【解决方案3】：

这里是如何做到这一点。 WORKING EXAMPLE HERE

<div class="card">
    <div class="card-block">
      <div class="row">
        <div class="col-xs-4">
          <h4 class="card-title">Title</h4>
        </div>
        <div class="col-xs-4">
          <h5>-  smaller that should be beside main title</h5>
        </div>
        <div class="col-xs-4">
           <button class="card-title btn btn-primary pull-right">Button</button>
        </div>
      </div>
        <p class="card-text">Entry 1</p>
        <p class="card-text">Entry 2</p>
        <p class="card-text">Entry 3</p>
        <p class="card-text">Entry 4</p>
    </div>
</div>

【讨论】：

【解决方案4】：

您可以使用inline-block 轻松解决此问题

.card-title , h5{
   display:inline-block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="card">
    <div class="card-block">
        <h4 class="card-title">Title</h4>
        <h5>-  smaller that should be beside main title</h5>
        <button class="card-title btn btn-primary">Button</button>
        <p class="card-text">Entry 1</p>
        <p class="card-text">Entry 2</p>
        <p class="card-text">Entry 3</p>
        <p class="card-text">Entry 4</p>
    </div>
</div>

【讨论】：