Question

我正在尝试使用bootstrap 3+将相似的布局与此图片匹配。

除了“结束”部分，单选按钮旁边有文本框，我才能正常工作。有人可以帮助我解决语法问题。

我创建了一个jsFiddle，我在。 jsFiddle

<div class="form-group">
<label class="col-sm-2 control-label">Ends:</label>
<div class="col-sm-6">
  <label class="radio-inline">
<input type="radio" name="ends" id="endsAfter" value="EndsAfter"> After                     </label>
 <label>
    <input type="text" class="form-control" name="afterOccur" id="afterOccur" disabled> occurrences </label>
 </div>
</div>
<div cass="input-group">
<div class="col-sm-6">
  <label class="radio-inline">
    <input type="radio" name="ends" id="endsOn" value="EndsOn">On</label>
  <input type="text" class="form-control col-sm-4" name="onDate" id="onDate" disabled />
</div>
</div>

Answer 1

如何通过从这里拖放表单元素http://bootsnipp.com/forms来尝试在引导程序上构建表单，我想这将完全构建您所要求的内容。

修改

从元素从左向右拖动并查看HTML。尝试在此构建http://bootsnipp.com/j87klPolka/formbuilder3.html更明确

Answer 2

这是一个可能至少可以为您提供帮助的示例。没有什么特别之处，唯一的补充是一些CSS，以保持摘要标签与表格的其余部分一致。它只是使用偏移来保持所有内容正确排列，并将需要保持在一起的控件分组。您可以将列值更改为您实际需要的值，只需记住在表单中保持一致。请参阅Forms。

查看工作代码段。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form name="form1" class="form-horizontal" method="post">
    <div class="form-group">
      <label class="control-label col-sm-2" for="Repeats">Repeats:</label>
      <div class="col-sm-10">
        <Select name="Repeats" id="Repeats" class="form-control">
          <option value="weekly">Weekly</option>
          <option value="monthly">Monthly</option>
        </Select>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="RepeatEvery">Repeats Every:</label>
      <div class="col-sm-8">
        <select name="RepeatEvery" id="RepeatEvery" class="form-control">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
        </select>
      </div>
      <div class="col-sm-2">
        <label>Weeks</label>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2">Repeat On:</label>
      <div class="col-sm-10">
        <input type="checkbox" class="checkbox-inline" name="sunday" id="sunday" title="Sunday" /> S
        <input type="checkbox" class="checkbox-inline" name="monday" id="monday" title="Monday" /> M
        <input type="checkbox" class="checkbox-inline" name="tuesday" id="tuesday" title="Tuesday" /> T
        <input type="checkbox" class="checkbox-inline" name="wednesday" id="wednesday" title="Wednesday" /> W
        <input type="checkbox" class="checkbox-inline" name="thursday" id="thursday" title="Thursday" /> T
        <input type="checkbox" class="checkbox-inline" name="friday" id="friday" title="Friday" /> F
        <input type="checkbox" class="checkbox-inline" name="saturday" id="saturday" title="Saturday" /> S
      </div>
    </div>
    <div id="RepeatByBlock" name="RepeatByBlock">
      <div class="form-group">
        <label class="col-sm-2 control-label">Multiple Time</label>
        <div class="col-sm-10">
          <label class="radio-inline">
            <input type="radio" name="RepeatBy" id="RepeatByMonth" value="month" checked>Day of the Month</label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="startsOn">Starts On:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" name="startsOn" id="startsOn" readonly />
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2">Ends:</label>
      <div class="col-sm-10">
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">Never
          </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 col-sm-offset-2">
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">After
          </label>
        </div>
      </div>
      <div class="col-sm-4">
        <input type="text" class="form-control" name="afterOccur" id="afterOccur" disabled>
      </div>
      <label class="control-label col-sm-2" for="afterOccur">Occurrences</label>
    </div>
    <div class="form-group">
      <div class="col-sm-2 col-sm-offset-2">
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">On
          </label>
        </div>
      </div>
      <div class="col-sm-6">
        <input type="text" class="form-control" name="onOccur" id="onOccur" disabled>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2">
        <label class="summary">Summary:</label>
      </div>
      <div class="col-sm-10">
        Weekly on Monday, until Jan 19, 2016
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-8 col-sm-offset-2">
        <button class="btn btn-default" type="submit">Done</button>
        <button class="btn btn-default" type="submit">Cancel</button>
      </div>
    </div>
  </form>
</div>

public class MoviesController : Controller
{
    MoviesEntities db = new MoviesEntities();
    public ActionResult Index()
    {
        var movies = from m in db.Films
                     where m.ReleaseDate > new DateTime(1989, 12, 20)
                     select m;
        return View(movies.ToList());
    }

    public ActionResult Create()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Create(Film newFilm)
    {
        ..some code for adding new movie in the database
    }
}

Bootstrap并排表单元素

2 个答案: