Добавление интервалов в список начальной загрузки - PullRequest
Новая
       52

Добавление интервалов в список начальной загрузки

0 голосов
/ 14 мая 2019

Я очень новичок в загрузке html и twitter, но догадываюсь, что есть очень простое исправление, которое мне просто не хватает. У меня есть 3 столбца, которые состоят из переключателя и 2 текстовых столбцов, проблема, с которой я сталкиваюсь, заключается в том, что между 2 текстовыми столбцами нет промежутка, но между переключателем и первым текстовым полем есть интервал.

Я пытался поиграть с размерами строк "div class =" row-sm-4 ", но безуспешно 

<div class="col" style="overflow:auto;height:60vh;">
                    <div class="col-sm-12" style="max-height:10%;" ng-repeat="FoundAlises in SearchResults" ng-class="GetClassForSearchResult(FoundAlises)">
                       <div class="row mb-1"> 
                            <div class="col-sm-1 mt-12">
                                <input class="cursorPointer" type="radio" ng-model="$parent.SelectedSearchResult" ng-value="FoundAlises" name="AliasSearchResults" ng-click="OnSearchClicked(FoundAlises)">
                            </div>
                            <div class="row-sm-4">
                                <small class="cursorPointer" ng-click="OnSearchClicked(FoundAlises)">Alias : <small ng-bind="FoundAlises.Alias"></small></small>
                                <small class="cursorPointer" ng-click="OnSearchClicked(FoundAlises)">Tag : <small ng-bind="FoundAlises.Tag"></small></small>
                            </div>
                        </div>
                    </div>

Следующая область, где у меня возникла проблема 

    <div class="row-sm-4">
       <small class="cursorPointer" ng-click="OnSearchClicked(FoundAlises)">Alias : <small ng-bind="FoundAlises.Alias"></small></small>
       <small class="cursorPointer" ng-click="OnSearchClicked(FoundAlises)">Tag : <small ng-bind="FoundAlises.Tag"></small></small>
    </div>

Я ожидаю, что выходные данные будут все в одной строке и будут иметь одинаковый интервал между всеми 3 столбцами. Стоит заметить, но не уверен, окажет ли это какое-либо влияние, так как отображаемые результаты могут иметь различную длину текста. Я надеялся, что в этих случаях весь текст в одном и том же столбце будет встроенным, например, все метки «Псевдоним:» будут находиться в строке в 1 столбце, а все метки «Тэг:» будут встроены в следующем столбце.

Ожидаемый результат 

|Radio Button|       Alias: **********       Tag:*******  
|Radio Button|       Alias: ************     Tag:******* 
|Radio Button|       Alias: *******          Tag:**********

Токовый выход 

|Radio Button|       Alias: **********       Tag:*******  
|Radio Button|       Alias: ************       Tag:******* 
|Radio Button|       Alias: *******       Tag:**********

Ответы [ 2 ]

1 голос
/ 14 мая 2019 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col" style="overflow:auto;height:60vh;">
  <div class="col-sm-12" style="max-height:10%;" ng-repeat="FoundAlises in SearchResults" ng-class="GetClassForSearchResult(FoundAlises)">
     <div class="row mb-1"> 
          <div class="col-sm-1">
              <input class="cursorPointer" type="radio" ng-model="$parent.SelectedSearchResult" ng-value="FoundAlises" name="AliasSearchResults" ng-click="OnSearchClicked(FoundAlises)">
            </div>
          <div class="col-sm-1">
              <small class="cursorPointer" ng-click="OnSearchClicked(FoundAlises)">Alias : <small ng-bind="FoundAlises.Alias"></small></small>
          </div>
          <div class="col-sm-1">
            <small class="cursorPointer" ng-click="OnSearchClicked(FoundAlises)">Tag : <small ng-bind="FoundAlises.Tag"></small></small>
          </div>
      </div>
  </div>
</body>
</html>

Это может вам помочь!

0 голосов
/ 14 мая 2019

Я внес некоторые изменения в ваш код, используя начальный и встроенный стили, объявив ширину элемента в процентах и ​​используя display: inline-block;, чтобы сохранить строки в одной строке, например: 

<div class="col" style="overflow:auto;height:60vh;">
  <div class="col-sm-12" style="max-height:10%;" ng-repeat="FoundAlises in SearchResults"
    ng-class="GetClassForSearchResult(FoundAlises)">
    <div class="row mb-1">
      <input style="width: 30%; display: inline-block;" class="cursorPointer align-text-top p-1 m-3"
        type="radio" ng-model="$parent.SelectedSearchResult" ng-value="FoundAlises" name="AliasSearchResults"
        ng-click="OnSearchClicked(FoundAlises)">
      <small style="width: 30%; display: inline-block;" class="cursorPointer align-text-top p-1"
        ng-click="OnSearchClicked(FoundAlises)">Alias : <small ng-bind="FoundAlises.Alias"></small>Lorem ipsum dolor sit
        amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</small>
      <small style="width: 30%; float: right;" class="cursorPointer align-text-top p-1"
        ng-click="OnSearchClicked(FoundAlises)">Tag : <small ng-bind="FoundAlises.Tag"></small>Lorem ipsum dolor sit
        amet, consectetur adipiscing elit.</small>
    </div>

    <div class="row mb-1">
      <input style="width: 30%; display: inline-block;" class="cursorPointer align-text-top p-1 m-3"
        type="radio" ng-model="$parent.SelectedSearchResult" ng-value="FoundAlises" name="AliasSearchResults"
        ng-click="OnSearchClicked(FoundAlises)">
      <small style="width: 30%; display: inline-block;" class="cursorPointer align-text-top p-1"
        ng-click="OnSearchClicked(FoundAlises)">Alias : <small ng-bind="FoundAlises.Alias"></small>Lorem ipsum dolor sit
        amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
        minim veniam.</small>
      <small style="width: 30%; float: right;" class="cursorPointer align-text-top p-1"
        ng-click="OnSearchClicked(FoundAlises)">Tag : <small ng-bind="FoundAlises.Tag"></small>Lorem ipsum dolor sit
        amet, consectetur adipiscing elit.</small>
    </div>

    <div class="row mb-1">
      <input style="width: 30%; display: inline-block;" class="cursorPointer align-text-top p-1 m-3"
        type="radio" ng-model="$parent.SelectedSearchResult" ng-value="FoundAlises" name="AliasSearchResults"
        ng-click="OnSearchClicked(FoundAlises)">
      <small style="width: 30%; display: inline-block;" class="cursorPointer align-text-top p-1"
        ng-click="OnSearchClicked(FoundAlises)">Alias : <small ng-bind="FoundAlises.Alias"></small>Lorem ipsum dolor sit
        amet, consectetur adipiscing elit.</small>
      <small style="width: 30%; float: right;" class="cursorPointer align-text-top p-1"
        ng-click="OnSearchClicked(FoundAlises)">Tag : <small ng-bind="FoundAlises.Tag"></small>Lorem ipsum dolor sit
        amet, consectetur adipiscing elit.</small>
    </div>

  </div>

Надеюсь, это поможет.Дайте мне знать, если это не то, что вы ищете.

...