Question

寻找如下三列。

<div class="row">
    <div class="col-md-4">Subject: <span id="ticket-subject">Subject</span></div>
    <div class="col-md-4">Topic: <span id="ticket-topic">Topic</span></div>
    <div class="col-md-4">Status: <span id="ticket-status">Status</span></div>
</div>

如何通过使用描述列表和Twitter Bootstrap库来产生相同的效果？

<dl class="row">
    <dt class="col-md-4">Subject:</dt><dd id="ticket-subject">Subject</dd>
    <dt class="col-md-4">Topic:</dt><dd id="ticket-topic">Topic</dd>
    <dt class="col-md-4">Status:</dt><dd id="ticket-status">Status</dd>
</dl>

Answer 1

选中此一项：

.row {
        display: flex;
    }
    .label-topic {
        width: auto;
        font-weight: normal;
        padding-right: 5px;
    }
    dd {
        margin-right: 25%;
    }

 <html>
 <head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>

<dl class="row">
    <dt class="col-md-4 label-topic">Subject:</dt><dd id="ticket-subject">Subject</dd>
    <dt class="col-md-4 label-topic">Topic:</dt><dd id="ticket-topic">Topic</dd>
    <dt class="col-md-4 label-topic">Status:</dt><dd id="ticket-status">Status</dd>
</dl>

</body>
</html>

具有说明列表（<dl>）的Twitter Boostrap网格系统

1 个答案: