Question

在Bootstrap中，如何将标题文本与警报文本对齐

所以我在此页面上使用 alert 类，然后使用标题，然后使用另一个警报。由于警报在一个框内，因此txt从标题文字的右边开始。现在，我知道可以使用 mx-2 类将标题中的文本进一步向右对齐，但是必须在所有地方都添加这些额外的边距，这向我表明我正在以非Bootstrap方式进行操作。

标题应位于其他内容之内，以便它自动与警报对齐。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<main class='container-fluid'>
  <h1 class="alert alert-danger" role="alert">
    Preview Only, no actual changes will be made to your music files
  </h1>
  <h1 >
    Fix Songs Report 396
  </h1>
  <div>
    <h3>
      Errors and Warnings
    </h3>
    <div>

      <div class="alert alert-warning" role="alert">
        <h5 class="alert-heading">
          Mar 23, 2019, 2:42:06 PM
        </h5>

        <p>
          Warning:Naim E:\Melco\TestMusic\TestMusic\TestMusic\WAV\Music\Various Artists\Pure Rock Ballads:AmgInfo.xml Track Count doesnt match No Of Songs so ignoring track metadata:Song Count 36:Track Count 19
        </p>
      </div>
    </div>
  </div>
</main>

Answer 1

您可以将需要对齐的文本包装在“卡片”元素中：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<main class='container-fluid'>
  <h1 class="alert alert-danger custom-alert" role="alert">
    Preview Only, no actual changes will be made to your music files
  </h1>

  <div class="card" style="border:0">
    <div class="card-body">
      <h1>
        Fix Songs Report 396
      </h1>

      <h3>
        Errors and Warnings
      </h3>
    </div>
  </div>
  <div>
    <div class="alert alert-warning custom-alert" role="alert">
      <h5 class="alert-heading">
        Mar 23, 2019, 2:42:06 PM
      </h5>

      <p>
        Warning:Naim E:\Melco\TestMusic\TestMusic\TestMusic\WAV\Music\Various Artists\Pure Rock Ballads:AmgInfo.xml Track Count doesnt match No Of Songs so ignoring track metadata:Song Count 36:Track Count 19
      </p>
    </div>
  </div>

</main>

PS：为什么要使用这么多的空div标签？

PSS：如果要保留卡的边框，请删除以下内容： style =“ border：0 ”

Answer 2

我认为没有达到目标的引导方法。警报框打算与标题的边距不同。

我建议更改元素的顺序。首先是标题，然后是错误，然后是警告，并保留空白。

另一种方法是，如前所述，向所有元素添加一个带有margin-left的自定义css类。也许您可以使用h1-h5的全局类。

编辑：

所以我认为这是一个品味问题。这是另一种方法，将您的内容包装在无色警报框中，以便获得相同的边距。


    <!doctype html>
    <html lang="en">

    <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

      <title>Hello, world!</title>
    </head>

    <body>

      <div class="container-fluid">

        <div class="alert alert-danger" role="alert">
          <h1>
            Preview Only, no actual changes will be made to your music files
          </h1>
        </div>

        <div class="alert">
          <h1>Fix Songs Report 396</h1>
          <h3>Errors and Warnings</h3>
        </div>

        <div class="alert alert-warning" role="alert">
          <h5 class="alert-heading">
            Mar 23, 2019, 2:42:06 PM
          </h5>

          <p>
            Warning:Naim E:\Melco\TestMusic\TestMusic\TestMusic\WAV\Music\Various Artists\Pure Rock Ballads:AmgInfo.xml
            Track Count doesnt match No Of Songs so ignoring track metadata:Song Count 36:Track Count 19
          </p>
        </div>

      </div>

      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    </body>

    </html>

Answer 3

只能通过覆盖引导程序警报CSS 来解决此问题，这不是一个好习惯。我只是在下面的代码片段中添加覆盖CSS ，希望对您有所帮助。谢谢

.custom-alert {
  padding: 10px !important;
  margin: 0 -10px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<main class='container-fluid'>
  <h1 class="alert alert-danger custom-alert" role="alert">
    Preview Only, no actual changes will be made to your music files
  </h1>
  <h1 >
    Fix Songs Report 396
  </h1>
  <div>
    <h3>
      Errors and Warnings
    </h3>
    <div>

      <div class="alert alert-warning custom-alert" role="alert">
        <h5 class="alert-heading">
          Mar 23, 2019, 2:42:06 PM
        </h5>

        <p>
          Warning:Naim E:\Melco\TestMusic\TestMusic\TestMusic\WAV\Music\Various Artists\Pure Rock Ballads:AmgInfo.xml Track Count doesnt match No Of Songs so ignoring track metadata:Song Count 36:Track Count 19
        </p>
      </div>
    </div>
  </div>
</main>

Answer 4

您可以尝试使用

<div class="container">    
<h1 class="text-center display-4">

首先，标签可帮助您将所有内容居中。因此，请将标签放在正文的开头。第二个标签是我个人最喜欢的标头类。它非常简单，我在许多项目中都使用了它。希望这会有所帮助:)

在Bootstrap中，如何将标题文本与警报文本对齐

4 个答案: