將標題向右對齊 - Bootstrap Dialog 插件

Question

如何通過為節目 function 提供更多選項來將標題“hello”向右對齊？

謝謝。

 BootstrapDialog.show({ message: 'Hi Apple,': title; "hello" });

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>

鏈接： https://github.com/nakupanda/bootstrap3-dialog

Answer 1

您可以遵循以下兩種方法中的任何一種：

1-添加此 css 以更改對話框中的標題寬度並添加 text-align

.bootstrap-dialog-title
{
  text-align:right;
  width:90%
}

2-考慮這樣的標題的特殊變量

var $title = $('<div class=" textR text-right">Hello</div>');
  
BootstrapDialog.show({
        message: 'Hi Apple!',
        title: $title
    });

然后添加這個 CSS

.textR{
   width:500px;
}

Answer 2

使用瀏覽器中的開發工具查找標題的 class 或 id 並為其應用一些 styles ，例如：

.title {
    text-align: center;
}

Answer 3

根據您提供的鏈接，已經有 JS Fiddle 可用： http://jsfiddle.net/o5k0eaws/1/在此示例中，class 名稱為：bootstrap-dialog-header

.bootstrap-dialog-header{
 text-align:center;
 }

Answer 4

由於您想將標題向右對齊，因此可以使用以下方法。

.bootstrap-dialog-header {
    float: right
}