Сетка Twitter Boostrap с описанием (<dl>) - PullRequest
Новая
       25

Сетка Twitter Boostrap с описанием (<dl>)

0 голосов
/ 21 ноября 2018

Глядя на три столбца, как показано ниже. 

<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>

Как создать тот же эффект, но с использованием списка описания и библиотеки Bootstrap Twitter? 

<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>

1 Ответ

0 голосов
/ 21 ноября 2018

Отметьте это: 

.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>
...