元素之间的边界

时间：2018-01-19 09:46:29

标签： html css twitter-bootstrap twitter-bootstrap-3

我似乎无法让输入在它们之间有差距。我虽然form-group应该处理这个但是边际不起作用。

为什么不工作？如何解决这个问题？

＆＃13;
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#command">Command</a></li>
    <li><a data-toggle="tab" href="#volumes">Volumes</a></li>
    <li><a data-toggle="tab" href="#networkTab">Network</a></li>
    <li><a data-toggle="tab" href="#labels">Labels</a></li>
    <li><a data-toggle="tab" href="#environmentTab">Environment Variables</a></li>
    <li><a data-toggle="tab" href="#security">Security</a></li>
  </ul>
  <div class="tab-content tab-content-border" style="width: 100%">
    <div id="command" class="tab-pane fade in active">
      <div class="form-group">
        <label for="commands" class="col-sm-2 control-label">Command</label>
        <div class="col-sm-10">
          <input name="commands" id="commands" class="form-control" type="text" />
        </div>
      </div>
      <div class="form-group">
        <label for="entryPoint" class="col-sm-2 control-label">Entry Point</label>
        <div class="col-sm-10">
          <input name="entryPoint" id="entryPoint" class="form-control" type="text" />
        </div>
      </div>
      <div class="form-group">
        <label for="workingDir" class="col-sm-2 control-label">Working
                                                Directory</label>
        <div class="col-sm-10">
          <input name="workingDir" id="workingDir" class="form-control" type="text" />
        </div>
      </div>
      <div class="form-group">
        <label for="user" class="col-sm-2 control-label">User</label>
        <div class="col-sm-10">
          <input name="user" id="user" class="form-control" type="text" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">Console</label>
        <div class="col-sm-10">
          <div class="col-sm-5">
            <div class="radio radio-info">
              <input name="console" id="it" class="form-control" type="radio" />
              <label for="it">Interactive & TTY
                                                            <small>(-i -t)</small>
                                                        </label>
            </div>
            <div class="radio radio-info">
              <input name="console" id="tty" class="form-control" type="radio" />
              <label for="tty">TTY
                                                            <small>(-t)</small>
                                                        </label>
            </div>
          </div>
          <div class="col-sm-5">
            <div class="radio radio-info">
              <input name="console" id="interactive" class="form-control" type="radio" />
              <label for="interactive">Interactive
                                                            <small>(-i)</small>
                                                        </label>
            </div>
            <div class="radio radio-info">
              <input name="console" id="none" class="form-control" type="radio" checked/>
              <label for="none">None</label>
            </div>
          </div>
        </div>
      </div>
    </div>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：0)

您可以尝试将类添加到表单组div。在这种情况下，我添加了“输入框”类。

      <div class="form-group input-box">
        <label for="entryPoint" class="col-sm-2 control-label">Entry 
          Point</label>
        <div class="col-sm-10">
          <input name="entryPoint" id="entryPoint" class="form-control" 
          type="text"/>
        </div> 
      </div>

对于CSS ... 

.input-box {
  padding-bottom: 30px;
  }

这应该在每个输入之间增加30px的间隙。

答案 1 :(得分：0)

检查此代码段。我为每个输入添加了一个margin-bottom类。

另外，当您添加带行的div标签时，请确保先添加容器。这是必须添加否则内容将溢出。

希望这能解决你的问题。

.margin-bottom {
  margin-bottom: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <ul class="nav nav-tabs">
      <li class="active"><a data-toggle="tab" href="#command">Command</a></li>
      <li><a data-toggle="tab" href="#volumes">Volumes</a></li>
      <li><a data-toggle="tab" href="#networkTab">Network</a></li>
      <li><a data-toggle="tab" href="#labels">Labels</a></li>
      <li><a data-toggle="tab" href="#environmentTab">Environment Variables</a></li>
      <li><a data-toggle="tab" href="#security">Security</a></li>
    </ul>
    <div class="tab-content tab-content-border" style="width: 100%">
      <div id="command" class="tab-pane fade in active">

        <div class="form-group margin-bottom">
          <label for="commands" class="col-sm-2 control-label">Command</label>
          <div class="col-sm-10">
            <input name="commands" id="commands" class="form-control margin-bottom" type="text" />
          </div>
        </div>

        <div class="form-group">
          <label for="entryPoint" class="col-sm-2 control-label">Entry Point</label>
          <div class="col-sm-10">
            <input name="entryPoint" id="entryPoint" class="form-control margin-bottom" type="text" />
          </div>
        </div>
        <div class="form-group">
          <label for="workingDir" class="col-sm-2 control-label">Working
                                                Directory</label>
          <div class="col-sm-10">
            <input name="workingDir" id="workingDir" class="form-control margin-bottom" type="text" />
          </div>
        </div>
        <div class="form-group">
          <label for="user" class="col-sm-2 control-label">User</label>
          <div class="col-sm-10">
            <input name="user" id="user" class="form-control margin-bottom" type="text" />
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">Console</label>
          <div class="col-sm-10">
            <div class="col-sm-5">
              <div class="radio radio-info">
                <input name="console" id="it" class="form-control margin-bottom" type="radio" />
                <label for="it">Interactive & TTY
                                                            <small>(-i -t)</small>
                                                        </label>
              </div>
              <div class="radio radio-info">
                <input name="console" id="tty" class="form-control" type="radio" />
                <label for="tty">TTY
                                                            <small>(-t)</small>
                                                        </label>
              </div>
            </div>
            <div class="col-sm-5">
              <div class="radio radio-info">
                <input name="console" id="interactive" class="form-control" type="radio" />
                <label for="interactive">Interactive
                                                            <small>(-i)</small>
                                                        </label>
              </div>
              <div class="radio radio-info">
                <input name="console" id="none" class="form-control" type="radio" checked/>
                <label for="none">None</label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

答案 2 :(得分：0)

@sdasdasd 请仔细阅读此示例代码段：

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
</form>

https://fiddle.jshell.net/Bharadhwaj/ckckkz66/

答案 3 :(得分：0)

你只需要添加行类来完成这个小提琴 - https://fiddle.jshell.net/Bharadhwaj/3bfpnu94/1/ 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#command">Command</a></li>
    <li><a data-toggle="tab" href="#volumes">Volumes</a></li>
    <li><a data-toggle="tab" href="#networkTab">Network</a></li>
    <li><a data-toggle="tab" href="#labels">Labels</a></li>
    <li><a data-toggle="tab" href="#environmentTab">Environment Variables</a></li>
    <li><a data-toggle="tab" href="#security">Security</a></li>
  </ul>
  <div class="tab-content tab-content-border" style="width: 100%">
    <div id="command" class="tab-pane fade in active">
      <div class="form-group row">
        <label for="commands" class="col-sm-2 control-label">Command</label>
        <div class="col-sm-10">
          <input name="commands" id="commands" class="form-control" type="text" />
        </div>
      </div>
      <div class="form-group row">
        <label for="entryPoint" class="col-sm-2 control-label">Entry Point</label>
        <div class="col-sm-10">
          <input name="entryPoint" id="entryPoint" class="form-control" type="text" />
        </div>
      </div>
      <div class="form-group row">
        <label for="workingDir" class="col-sm-2 control-label">Working
                                                Directory</label>
        <div class="col-sm-10">
          <input name="workingDir" id="workingDir" class="form-control" type="text" />
        </div>
      </div>
      <div class="form-group">
        <label for="user" class="col-sm-2 control-label">User</label>
        <div class="col-sm-10">
          <input name="user" id="user" class="form-control" type="text" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">Console</label>
        <div class="col-sm-10">
          <div class="col-sm-5">
            <div class="radio radio-info">
              <input name="console" id="it" class="form-control" type="radio" />
              <label for="it">Interactive & TTY
                                                            <small>(-i -t)</small>
                                                        </label>
            </div>
            <div class="radio radio-info">
              <input name="console" id="tty" class="form-control" type="radio" />
              <label for="tty">TTY
                                                            <small>(-t)</small>
                                                        </label>
            </div>
          </div>
          <div class="col-sm-5">
            <div class="radio radio-info">
              <input name="console" id="interactive" class="form-control" type="radio" />
              <label for="interactive">Interactive
                                                            <small>(-i)</small>
                                                        </label>
            </div>
            <div class="radio radio-info">
              <input name="console" id="none" class="form-control" type="radio" checked/>
              <label for="none">None</label>
            </div>
          </div>
        </div>
      </div>
    </div>

相关问题
最新问题