Question

如何设计应在（桌面，移动设备，平板电脑）中心对齐的表单

并添加边框，如附图所示

代码：

   <div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">

            <p class="main_heading">Start building your project!</p>

            <p class="sub_heading">
                Add a story, picture and other important details
            </p>

                    <form class="form-horizontal" role="form">
        <fieldset>

          <div class="form-group">
            <label class="col-sm-3 control-label">Project title</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" name="project_title" id="project_title" placeholder="Enter Project Title">
              <p>Your project title and blurb should be simple, specific, and memorable. Our search tools run through these sections of your project, so be sure to incorporate any key words here! 

    These words will help people find your project, so choose them wisely! Your name will be searchable too.</p>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">Story</label>
            <div class="col-sm-9">
              <p>Use your story to share on your as well as your FRIEND AND FANS' Facebook wall!</p>
              <textarea class="form-control" name="story" id="story" placeholder="Enter Story"></textarea>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">Picture</label>
            <div class="col-sm-9">
              <input type="file" class="form-control" name="picture" id="picture">
            </div>
          </div>

         <div class="form-group">
            <label class="col-sm-3 control-label">Video</label>
            <div class="col-sm-9">
              <input type="file" class="form-control" name="video" id="video">
              <p>Have fun - add a video. A video have a much higher chance of success. The video will be shared on your as well as your FRIEND AND FANS' Facebook Wall!</p>
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-3 control-label">Short blurb</label>
            <div class="col-sm-9">
              <textarea class="form-control" name="short_blurb" id="short_blurb"></textarea>
              <p>If you had to describe what you're doing in one tweet, how would you do it?</p>
            </div>
          </div>


          <div class="form-group">
            <div class="col-sm-offset-3 col-sm-9">
              <button type="button" class="btn btn-success">Submit</button>
            </div>
          </div>
        </fieldset>
      </form>



                    <!------------>

                </div>
            </div>
    </div>

这是样本设计，附在

下面

enter image description here

Answer 1

您可以设置.container和.form-group

的样式

.container {
  border: 1px solid #D8D8D8;
  border-radius: 3px;
}

.form-group 
{ 
  background-color: #F2F2F2; 
  padding: 10px 0;
}

Demo

Answer 2

你可以将它添加到你的CSS中并将'block'添加到div类中，该类也包括çontainer'。

.Block {
border:orange solid 2px;
padding: 1% 1% 1% 1%;
-webkit-border-radius: 5px 5px 5px 5px ;
-moz-border-radius: 5px 5px 5px 5px ;
border-radius: 5px 5px 5px 5px ;
overflow: visible;

}

<div class="container block ">

在bootstrap中的样式形式3

2 个答案: