Question

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

我希望输出全部在一行上，并且所有三列之间的间距相等。需要注意的一件事，但不确定是否会产生影响，因为显示的结果可能是不同的文本长度。我希望在这些情况下，同一列中的所有文本都是内联的，例如，所有“别名：”标签都将在第一列中内联，而所有“标签：”标签都将在下一列中内联

预期产量

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

电流输出

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

Answer 1

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

这可能对您有帮助！

Answer 2

我使用引导程序和内联样式对您的代码进行了一些更改，方法是将元素宽度声明为百分比，并使用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>

希望这会有所帮助。让我知道这是否不是您想要的东西。

向引导列表添加间距

2 个答案: