Question

我在网页中使用了引导程序标签，但在正常页面中它看起来不错，但在模态中没有边距b / w两个标签：

$('.task').dblclick(function (e) {
$('#Modal_Task_View').modal({keyboard: true, show: true});
});

/* Common styles for all types */
.task {
  padding: 10px 15px;
  margin: 10px 0;
  border: 1px solid #eee;
  border-left-width: 10px;
  border-radius: 3px;
}
.task h4 {
  margin-top: 0;
  margin-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="task task-overdue" data-id="2">
    <div class="row">
        <div class="col-lg-9 col-md-8 col-sm-6 col-xs-12">
            <h4>Title 2 
                                (First Category)
                                <a href="javascript:;" title="View" class="task-view" id="2"><i class="fa fa-eye" aria-hidden="true"></i></a>
                <a href="http://www.fichtner.com:8080/tasks/create/2" title="Edit" class="task-view"><i class="fa fa-pencil" aria-hidden="true"></i></a>
            </h4> 
                        Assigned to :<span class="spn-actionee">
                 
                <label class="label label-info" data-type="1" data-id="28">Gobind Samrow(admindddd)</label>
                 
                <label class="label label-info" data-type="1" data-id="22">Chris Walker(CW)</label>
                        </span></div> 
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <span class="pull-right">
                Due Date: 26-Jun-2017<br>
                Days Left: 0
            </span>
        </div> 
    </div> 
</div>

    <div class="modal" id="Modal_Task_View" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" ><div class="modal-backdrop fade in"></div>
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title task_title">Task 2 Wishlist </h4>
                <label class="label task_status task-head-due">Due</label><label class="label label-info task_priority">Normal</label>
                <span class="pull-right"><label>Due Date : <span class="task_due_date">08-Jul-2017</span></label></span>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-6">
                        
                    </div>
                    <div class="col-sm-6">
                         <label>Category : <span class="tc_name">Second Category</span></label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <label>Description :</label>
                        <span class="task_desc">Description Description Description</span>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <label>Assigned To :</label>
                        <span class="spn-actionee"><label class="label label-info" data-id="1">Standard</label><label class="label label-info" data-id="17">Ash Wilde(ACW)</label><label class="label label-info" data-id="2">admin admin(admin)</label></span>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <div class="list-group spn-linked"><a href="javascript:;" class="list-group-item active">Linked Tasks</a><a href="javascript:;" class="list-group-item" data-id="4">Title 4</a><a href="javascript:;" class="list-group-item" data-id="3">Title 3</a></div>
                    </div>
                    <div class="col-sm-6">
                        <div class="list-group linked-docs"><a href="javascript:;" class="list-group-item active">Documents</a></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

Answer 1

标签类＆＃34; .label＆＃34;默认情况下是一个内联元素，因此当您将两个或多个放在一起时，默认情况下应该有一些空格。这应该也适用于模态。

此外，您不应该使用<label>元素。 <label>标记定义了<input>元素的标签。请改用<span>。

Answer 2

这是因为模态中没有换行或空格键看看这两个例子

无空格/换行示例

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<span><label class="label label-info" data-type="1" data-id="28">Gobind Samrow(admindddd)</label><label class="label label-info" data-type="1" data-id="22">Chris Walker(CW)</label></span>

＆＃13;

换行示例

＆＃13;

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<span>
    <label class="label label-info" data-type="1" data-id="28">Gobind Samrow(admindddd)</label>
    <label class="label label-info" data-type="1" data-id="22">Chris Walker(CW)</label>
</span>

＆＃13;

Answer 3

你可以试试这个

#myModal .modal-body span.spn-actionee label {
    margin-right: 10px;
}

希望它会对你有所帮助。

引导模式中标签之间的零边距

3 个答案: