Question

在我的输出下面没有每一行的空间，如何使用Bootstrap CSS为每一行提供空间？请检查代码

 <div class="form-group" >

                       <div class="col-sm-2">
                           <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                       </div>
                   </div>

先谢谢

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">

<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>


<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>

<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>





<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>

<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>

<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>





<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>

<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>

<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

  <div class="col-sm-2">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>

Answer 1

<flipViewControl:FlipView ItemsSource="{Binding Images}" Name="ImagesFlipView"
                                            SelectedIndex="{Binding ElementName=ProductImagesBullets, Path=SelectedIndex, Mode=TwoWay}" Grid.Row="0">
    <flipViewControl:FlipView.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding FileLocation, Converter={StaticResource ImagePathConverter}}" Stretch="Fill"/>
        </DataTemplate>
    </flipViewControl:FlipView.ItemTemplate>
</flipViewControl:FlipView>

Answer 2

正确的标记应该是（使用col宽度作为例子）：

    <div class="row">
        <div class="col-sm-2">
            <div class="form-group">
                <label for="input1">Some label</label>
                <input id="input1" placeholder="Type something…" type="text">
            </div>
            <div class="form-group">
                <label for="input2">Some label 2</label>
                <input id="input2" placeholder="Type something…" type="text">
            </div>
        </div>
    </div>

就目前而言，您没有定义任何行。

如何为每一行提供空间（CSS问题）

2 个答案: