Question

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
  <div class="row"> 
  <div class="col-md-12">
  <div class="col-md-3">
     <div class="form-group">
       <label for="reference">Reference</label>
           <input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
        <div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
          </div>
    </div>
    <div class="col-md-3">
                        
          <div class="form-group">
             <label class="checkbox-inline">
            <input type="checkbox" value="">Option 1</label>
           <div class="input-error form-control-input" style="color: Red; display: none;">Demo is required</div>
                            </div>
                        </div> 
  
  </div>
  </div>

现在，我想使输入框水平对齐。搜索后找不到。

Answer 1

Here's an example介绍如何操作。我将两个输入字段都放在一行中，它们用<div class="col-md-6">占据了行的一半。

这是代码

  <div class="row">
    <div class="col-md-12">
    <div class="col-md-6">

        <div class="form-group">
            <label for="reference">Reference</label>
            <div class="row align-middle">
                <div class="col-md-6">

                    <input class="form-control" id="reference" name="reference" placeholder="Reference" type="text">
                    <div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
                </div>
                <div class="col-md-6">

                    <label class="checkbox-inline">
                        <input value="" type="checkbox">Option 1</label>
                    <div class="input-error form-control-input" style="color: Red; display: none;">Demo is required</div>
                </div>
            </div>
        </div>
    </div>

</div>

Answer 2

这是一个可行的示例。

https://codepen.io/anon/pen/KBzLOR

                    Country  Maturity  Price
Timestamp                                   
2018-07-16 14:31:03      DE      2019  50.15
2018-07-13 11:59:50      DE      2019  51.00
2018-07-13 11:41:07      ES      2020  66.00
2018-07-12 15:33:59      DE      2020  55.00
2018-07-04 13:10:30      ES      2021  72.70

与输入字段水平对齐的复选框？

2 个答案: