css - 无法使用 Bootstrap 进行正常格式化

Question

我是 laravel 和 bootstrap 的新手。我已经花了 2 个小时尝试进行正常格式化，但结果是

enter image description here

我做错了什么？

<div class="row">
    <form method="POST" class="form-inline" action="{{action('OrderController@setDiscont')}}">
        <input type="hidden" name="_token" value="{{csrf_token()}}">
        <div class="input-group {{ $errors->has('discont') ? ' has-error' : '' }}">
            <span class="col-md-7">
                                            <input type="text" placeholder="Скидка" name="discont" class="form-control" value="{{$discont or ""}}">
                                        </span>
            <span class="input-group-btn col-md-5">
                                            <input type="submit" value="Установить" class="btn-block btn btn-default" > 
                                        </span>
            <div class="help-block">
                @if ($errors->has('discont'))
                <strong>{{ $errors->first('discont') }}</strong> @endif
            </div>
        </div>
    </form>
</div>

<div class="row">
    <form method="POST" class="form-inline" action="{{action('OrderController@setClient')}}">
        <input type="hidden" name="_token" value="{{csrf_token()}}">
        <div class="input-group {{ $errors->has('phone') ? ' has-error' : '' }}">
            <span class="col-md-7">
                                            <input type="text" placeholder="телефон" id="phone"  name="phone" class="form-control" value="{{ old('phone') }}">
                                        </span>
            <span class="input-group-btn col-md-5">
                                            <input type="submit" value="Найти" class="btn btn-primary" > 
                                        </span>
            <div class="help-block">
                @if ($errors->has('phone'))
                <strong>{{ $errors->first('phone') }}</strong> @endif
            </div>
        </div>
    </form>
</div>

Answer 1

这应该适合您。阅读 documentation对于输入组。我假设这就是您想要的 css 类，但您也可以查看 inline forms 的文档如果这就是您想要的。

<div class="row">
    <form method="POST" class="form-inline" action="POST">
        <input type="hidden" name="_token" value="{{csrf_token()}}">
        <div class="form-group {{ $errors->has('discont') ? ' has-error' : '' }}">
            <div class="input-group">
                <input type="text" placeholder="Скидка" name="discont" class="form-control" value="{{$discont or ""}}">
                <div class="input-group-addon" style="padding:0;">
                    <input type="submit" value="Установить" class="btn-block btn btn-default" style="border: 0px;border-radius: 0px; background-color: #ddd;"> 
                </div>
            </div>

            <div class="help-block">
             @if ($errors->has('discont'))
                    <strong>{{ $errors->first('discont') }}</strong>
             @endif                  
            </div>
        </div>   
    </form>
</div>    

<div class="row">
    <form method="POST" class="form-inline" action="POST">
        <input type="hidden" name="_token" value="{{csrf_token()}}">
        <div class="form-group {{ $errors->has('phone') ? ' has-error' : '' }}">
            <div class="input-group">
                <input type="text" placeholder="телефон" id="phone"  name="phone" class="form-control" value="{{ old('phone') }}">
                <div class="input-group-addon" style="padding:0;">
                    <input type="submit" value="Установить" class="btn-block btn btn-default" style="border: 0px;border-radius: 0px; background-color: #ddd;"> 
                </div>
            </div>

            <div class="help-block">
             @if ($errors->has('phone'))
                    <strong>{{ $errors->first('phone') }}</strong>
             @endif                  
            </div>
        </div>   
    </form>
</div>