Question

输入接缝的行比其他行宽（例如按钮）。

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
  <div tabindex="-1" role="dialog" class="modal" size="lg" index="0" style="z-index: 1050; display: block;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"><span aria-hidden="true">×</span></button>
                <h3 class="modal-title">Bootstrap Modal with horizontal form and input addon</h3>
            </div>
            <div class="modal-body ng-scope">
                
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="inputLinkPp" class="hidden-xs col-sm-3 control-label">Website</label>
                        <div class="input-group col-sm-9 xs-margin">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                            <input type="text" class="form-control" id="inputLinkPp" placeholder="link to your page"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <p class="col-sm-offset-3 col-sm-9" style="text-align: right">
                            <button type="button" class="btn btn-success">
                                <i class="glyphicon glyphicon-link"></i> Create</button>
                        </p>
                    </div>                    
                </form>
                
            </div>
        </div>
    </div>
    </div>
</div>
</body>

输入组插件不支持模态填充这样的接缝。但也许我不应该以水平形式向我们输入组？

关于它的任何想法？

Answer 1

我只使用Bootstrap类来实现这一点。看起来它完成了您的需求，唯一的问题是<label>上的垂直对齐方式与<input>不匹配。需要一些自定义的CSS来覆盖它。这是代码：

<div class="container">
  <div tabindex="-1" role="dialog" class="modal" size="lg" index="0" style="z-index: 1050; display: block;">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close"><span aria-hidden="true">×</span></button>
          <h3 class="modal-title">Bootstrap Modal with horizontal form and input addon</h3>
        </div>
        <div class="modal-body ng-scope">
          <div class="row">
            <div class="col-xs-2 text-right" >
              <label>Website</label>
            </div>
            <div class="col-xs-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                <input type="text" class="form-control" id="inputLinkPp" placeholder="link to your page"/>
              </div>
            </div>
          </div>
          <br/>
          <div class="row">
            <div class="col-xs-12 text-right">
              <div class="form-group">
                <button type="button" class="btn btn-success">
                  <i class="glyphicon glyphicon-link"></i> Create</button>
              </div> 
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

哦，我不小心从中移除了<form>标签，因此需要重新添加。这是Bootply的链接：

Bootply

希望有所帮助！

Answer 2

最后我找到了一个有效的解决方案。不确定它是否是正确的方式。在我的样式表中添加了这个：

.form-horizontal .input-group {
    padding-left: 15px;
    padding-right: 15px;
}

http://jsfiddle.net/ujnw8x4p/3/

Bootstrap：具有水平形式和输入插件的模态不能正确布局

2 个答案: