[英]Align title to the right - Bootstrap Dialog plugin
How can I align the title "hello" to the right by giving more options to the show function?如何通过为节目 function 提供更多选项来将标题“hello”向右对齐?
Thanks.谢谢。
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>
you could follow either of these 2 methods:您可以遵循以下两种方法中的任何一种:
1- add this css to change the title width in the dialog and add text-align 1-添加此 css 以更改对话框中的标题宽度并添加 text-align
.bootstrap-dialog-title
{
text-align:right;
width:90%
}
2- consider special variable for the title like this 2-考虑这样的标题的特殊变量
var $title = $('<div class=" textR text-right">Hello</div>');
BootstrapDialog.show({
message: 'Hi Apple!',
title: $title
});
and then add this CSS然后添加这个 CSS
.textR{
width:500px;
}
Use the dev tools in your browser to find the class or id of the title and apply some styles for it, something like:使用浏览器中的开发工具查找标题的 class 或 id 并为其应用一些 styles ,例如:
.title {
text-align: center;
}
As Per link you provided, there is JS Fiddle already available for it: http://jsfiddle.net/o5k0eaws/1/ from this example, the class name is: bootstrap-dialog-header根据您提供的链接,已经有 JS Fiddle 可用: http://jsfiddle.net/o5k0eaws/1/在此示例中,class 名称为:bootstrap-dialog-header
.bootstrap-dialog-header{
text-align:center;
}
Since you want to align the title to the right, the below would do.由于您想将标题向右对齐,因此可以使用以下方法。
.bootstrap-dialog-header {
float: right
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.