无法使用引导程序分配输入字段

时间:2019-12-03 15:19:54

标签: html css bootstrap-4

我不知道如何将左框调整为占位符的宽度。

从大小上来说,我希望它看起来像这样:

image ex

convert(tree(Element, Left, Right), Rest) :-
    convert(Left, LeftList),
    convert(Right, RightList),
    append(LeftList, [Element|RightList], Rest).
?- convert(tree(4, tree(2, tree(1, void, void), tree(3, void, void)),
                   tree(6, tree(5, void, void), tree(7, void, void))), 
           List).
List = [1, 2, 3, 4, 5, 6, 7].

2 个答案:

答案 0 :(得分:1)

就这样:

   <div class="container">
        <label for="phonNum"> Please enter phone Number</label>
        <div class="row text-left">
            <div class="form-group form-inline" show-errors>
                <div class="col-xs-6">
                    <input type="text" class="form-control" maxlength=3 name="phoneInt" size="3" placeholder="000"
                        ng-model="client.phoneIn">
                </div>
                <div class="col">
                    <input type="text" class="form-control" maxlength=10 name="phone" placeholder="1234567891"
                        ng-model="client.phone">
                </div>
            </div>
        </div>

检查https://jsfiddle.net/sugandhnikhil/ba5jhosn/1/

答案 1 :(得分:0)

您的HTML标记有点错误。第二列div立即关闭,而不是绕开第二输入。

我通过适当的标签对齐方式对您的提琴进行了一些更改,并且在第一个输入上使用了col-3,在第二个输入上使用了col来占用剩余的网格空间。第一次使用col-2将使其更小。请记住,引导网格中总共有12列!

https://jsfiddle.net/mtx2nu0y/

HTML

<div class="container">
<label for="phonNum"> Please enter phone Number</label>
  <div class="row text-left" >
    <div class="form-group form-inline"  show-errors>
      <div class="col-3">
        <input type="text" id="phoneInt" class="form-control" maxlength=3  name="phoneInt" placeholder="000" ng-model="client.phoneIn">
      </div>
      <div class="col">
        <input type="text" id="phone" class="form-control" maxlength=10  name="phone" placeholder="1234567891" ng-model="client.phone">
      </div>
    </div>
  </div>
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

#phoneInt, #phone {
  width: 100%;
}

这里是bootstap的网格文档的链接 https://getbootstrap.com/docs/4.0/layout/grid/