Question

使用bootstrap 4 alpha 6

我有一个看起来像这样的联系表格：

使用以下代码，我可以获得两列6，但字段都是错误的。这是该部分的代码：

<section id="contact">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>Contact Us</h2>
                <hr width="30%">
                <p>Need to get in touch? Fill in the form below for more information</p>
            </div>
        </div>
        <div class="row">
            <form class="form-inline col-md-12" role="form">
                <div class="col-md-6">
                    <fieldset class="form-group">
                        <input type="email" class="form-control" id="email" placeholder="email...">
                    </fieldset>
                    <fieldset class="form-group">
                        <input type="text" class="form-control" id="name" placeholder="name...">
                    </fieldset>
                    <fieldset class="form-group">
                        <input type="text" class="form-control" id="subject" placeholder="subject...">
                    </fieldset>
                </div>
                <div class="col-md-6">
                    <fieldset class="form-group">
                        <textarea name="" id="message" rows="3" class="form-control" placeholder="message..."></textarea>
                    </fieldset>

                    <button type="submit" class="btn btn-outline-info btn-block">Submit</button>
                </div>
            </form>
        </div>
    </div>
</section>

这是上面代码的表单：

如您所见，列已正确拆分，但字段未填充列的整个宽度。我在firebug中查看它，它显示了form-inline类，其宽度为：auto。

 .form-inline .form-control {
     display: inline-block;
     vertical-align: middle;
     width: auto;
 }

如果我关闭宽度：auto;在firebug中，然后控件填充六列的整个宽度。我可以通过添加一个新类并执行此操作在我自己的样式表中修复此问题：

 .contact-control 
 {
    width: 100% !important;  
 }

我只是想知道是否有更好的方法来使用bootstrap中的现有类。

Answer 1

我认为将div与class form-group而不是fieldset一起使用一定更好。我希望这可能有所帮助。

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>
    <section id="contact">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h2><b>Contact Us</b></h2>
                    <hr width="30%">
                    <p>Need to get in touch? Fill in the form below for more information</p>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="name" aria-describedby="emailHelp" placeholder="Name">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="subject" aria-describedby="emailHelp" placeholder="Subject">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <textarea type="text" class="form-control" id="subject" rows="4" aria-describedby="emailHelp" placeholder="Subject" ></textarea>
                    </div>
                     <button type="submit" class="btn btn-outline-info btn-block">Submit</button>
                </div>
            </div>
        </div>
    </section>
    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

Answer 2

我的情况是，如果你添加表单标签，它不起作用。我在这里有很好的例子，有任何CSS

<div class="container">
   <div class="row">
      <div class="col-md-12">
         <h4 class="heading">Utvärderingsformulär RETTS Nära Pilot - (Tranås VC)</h4>
         <hr>
      </div>
   </div>
   <form id="datainsamlingForm" method="POST" target="no-targer">
      <div class="row">
         <div class="col-md-6">
            <label class="control-label">App version number</label>
            <select class="form-control">
               <option>Version 1</option>
               <option>Version 2</option>
               <option>Version 3</option>
            </select>
         </div>
         <div class="col-md-6">
            <div class="form-group">
               <label class="control-label">Push Message</label>
               <p class="help-block"><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</small></p>
               <input type="text" class="form-control" id="inputSuccess1">
            </div>
         </div>
      </div>
      <hr>
      <div class="row">
         <div class="col-md-6">
            <label class="control-label">Content</label>
            <p class="help-block"><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</small></p>
            <select class="form-control">
               <option>Offer 1</option>
               <option>Offer 2</option>
            </select>
         </div>
         <div class="col-md-6">
            <label class="control-label">Play sound</label>
            <p class="help-block"><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</small></p>
            <select class="form-control">
               <option>Sound 1</option>
               <option>Sound 2</option>
               <option>Sound 3</option>
            </select>
         </div>
      </div>
      <div class="row">
      </div>
      <hr>
      <div class="row">
         <div class="col-md-6">
            <div class="form-group">
               <label class="control-label">Publish date/time</label>
               <div class="input-group date" id="datetimepicker1">
                  <input type="text" class="form-control">
                  <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> 
               </div>
            </div>
         </div>
         <div class="col-md-6">
            <div class="form-group">
               <label class="control-label">Expire date/time</label>
               <div class="input-group date" id="datetimepicker1">
                  <input type="text" class="form-control">
                  <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> 
               </div>
            </div>
         </div>
      </div>
      <hr>
      <div class="row">
         <div class="col-md-3">
            <h2>
               <a type="button" class="btn btn-custom btn-lg">Publish</a>
            </h2>
         </div>
      </div>
      <hr>
   </form>
</div>

需要12列形式，分成两列6

2 个答案: