2015-01-16 23 views
5

我正在構建一個使用angularjs和引導程序3作爲css的Web應用程序(我對css的知識非常有限)。我想創建一個帶有5個輸入字段和標籤的內嵌表單,並將它們放在它們的頂部。第一個領域需要比其他領域佔用更多的空間。在輸入字段上方標註一行的行內表格

我有一個plnkr我嘗試在這裏:http://plnkr.co/edit/a2p7RNy2SueH82WoSg5e?p=preview

這裏是我的嘗試標記:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<form name="form" novalidate="" ng-submit="processForm()" class="form-inline"> 
 

 
    <div class="form-group col-md-4"> 
 
    <label class="control-label" for="location"><i class="glyphicon glyphicon-map-marker"></i> Location</label> 
 
    <input class="form-control" id="location" name="location" type="text" ng-model="location" ng-required="true" ng-autocomplete details="details" options="options" placeholder="Location" /> 
 
    </div> 
 
    <div class="form-group col-md-4"> 
 
    <label class="control-label" for="startDate"><i class="glyphicon glyphicon-calendar"></i> Pickup date</label> 
 
    <input class="form-control" id="startDate" name="startDate" type="text" datepicker-popup="{{format}}" ng-model="startDate" is-open="openedStart" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openStart($event)" /> 
 
    </div> 
 
    <div class="form-group col-md-3"> 
 
    <label class="control-label" for="startTime"><i class="glyphicon glyphicon-time"></i> Pickup</label> 
 
    <select class="form-control" id="startTime" ng-model="selectedStartTime" ng-options="time.label for time in times" ng-required="true"> 
 
    </select> 
 
    </div> 
 
    <div class="form-group col-md-4"> 
 
    <label class="control-label" for="endDate"><i class="glyphicon glyphicon-calendar"></i> Dropoff date</label> 
 
    <input class="form-control" id="endDate" name="endDate" type="text" datepicker-popup="{{format}}" ng-model="endDate" is-open="openedEnd" min-date="startDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openEnd($event)" 
 
    /> 
 
    </div> 
 
    <div class="form-group col-md-3"> 
 
    <label class="control-label" for="endTime"><i class="glyphicon glyphicon-time"></i> Dropoff</label> 
 
    <select class="form-control" id="endTime" ng-model="selectedEndTime" ng-options="time.label for time in times" ng-required="true"> 
 
    </select> 
 
    </div> 
 
    <div class="row align-center"> 
 
    <input type="submit" value="Search" ng-disabled="form.$invalid" class="btn btn-primary" disabled="disabled" /> 
 
    </div> 
 
</form>

這是當前plnkr如何呈現標記: Current state

+1

你能描述一下你遇到的問題嗎......我打開了你的_Plunker_鏈接並沒有在結果中看到任何明顯的問題 – JRulle

+0

請記住,連續只有12列。您使用的數量多於導致它們使用2行的數量。 – Mattias

+0

@JRulle我編輯我的問題,添加一個img,看起來像。我希望所有的字段都在一行中。 – Neman

回答

3

添加我的評論作爲答案,因爲我猜測它可能是解決方案。

您正在使用4 + 4 + 3 + 4 + 3 = 18列。限制這些跨越總共最多12.決定哪些你可以做得更小。

0

你會像這樣的事情:

http://plnkr.co/edit/jWZMxIZEoBGuzjHgIiFq?p=preview

這是代碼:

<!DOCTYPE html> 
<html lang="en"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>Bootstrap, from Twitter</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta name="description" content="" /> 
    <meta name="author" content="" /> 
    <!-- Le styles --> 
    <link data-require="bootstrap-css" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
    <link data-require="[email protected]*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" /> 
    <style> 
     body { 
     padding-top: 60px; 
     } 
     @media (max-width: 979px) { 

     /* Remove any padding from the body */ 
     body { 
      padding-top: 0; 
     } 
     } 
     .form-group { 
     float:left; 
     margin: 1.2em; 
     } 
    </style> 
    <link href="style.css" rel="stylesheet" /> 
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> 
    <!--[if lt IE 9]> 
     <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <!-- Le fav and touch icons --> 
    <link rel="shortcut icon" href="images/favicon.ico" /> 
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png" /> 
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" /> 
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" /> 
    <!-- Le javascript 
    ================================================== --> 
    <script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script data-require="bootstrap" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <div class="container"> 
     <form name="form" novalidate="" ng-submit="processForm()" 
     class="form-inline"> 

     <div class="form-group col-md-4"> 
     <label class="control-label" for="location"><i class="glyphicon glyphicon-map-marker"></i> Location</label> 
     <br/><input class="form-control" id="location" name="location" type="text" ng-model="location" 
       ng-required="true" 
       ng-autocomplete details="details" options="options" placeholder="Location"/> 
     </div> 
     <div class="form-group col-md-4"> 
     <label class="control-label" for="startDate"><i class="glyphicon glyphicon-calendar"></i> Pickup date</label> 
     <br/><input class="form-control" id="startDate" name="startDate" type="text" 
       datepicker-popup="{{format}}" 
       ng-model="startDate" 
       is-open="openedStart" datepicker-options="dateOptions" 
       ng-required="true" close-text="Close" ng-click="openStart($event)"/> 
     </div> 
     <div class="form-group col-md-3"> 
     <label class="control-label" for="startTime"><i class="glyphicon glyphicon-time"></i> Pickup</label> 
     <br/><select class="form-control" id="startTime" ng-model="selectedStartTime" 
       ng-options="time.label for time in times" 
       ng-required="true"> 
     </select> 
     </div> 
     <div class="form-group col-md-4"> 
     <label class="control-label" for="endDate"><i class="glyphicon glyphicon-calendar"></i> Dropoff date</label> 
     <br/><input class="form-control" id="endDate" name="endDate" type="text" 
       datepicker-popup="{{format}}" 
       ng-model="endDate" 
       is-open="openedEnd" min-date="startDate" datepicker-options="dateOptions" 
       ng-required="true" close-text="Close" ng-click="openEnd($event)"/> 
     </div> 
     <div class="form-group col-md-3"> 
     <label class="control-label" for="endTime"><i class="glyphicon glyphicon-time"></i> Dropoff</label> 
     <br/><select class="form-control" id="endTime" ng-model="selectedEndTime" 
       ng-options="time.label for time in times" 
       ng-required="true"> 
     </select> 
     </div> 
    <!--</div>--> 
    <div class="row align-center"> 
     <input type="submit" value="Search" ng-disabled="form.$invalid" class="btn btn-primary" disabled="disabled"/> 
    </div> 
    </form> 
    </div> 
    <!-- /container --> 
    </body> 

</html> 
0

你可以嘗試包裝一個div裏面的標籤和輸入和嘗試。像:

<div class="form-group col-md-4"> 
    <div> 
    <label class="control-label" for="location"><i class="glyphicon glyphicon-map-marker"></i> Location</label> 
    </div> 
    <div> 
    <input class="form-control" id="location" name="location" type="text" ng-model="location" ng-required="true" ng-autocomplete details="details" options="options" placeholder="Location" /> 
    </div> 
</div> 
3

您只需要按照預期使用網格,始終牢記列的總數必須爲12.因此,在您的示例中,您可以使用類似的東西。注意:我怎麼也通過偏移列中分組形式的類似地區:

<div class="container"> 
<form name="form" novalidate="" ng-submit="processForm()" class="form-inline"> 
<div class="row"> 

    <div class="col-md-6"> 
    <label class="control-label" for="location"><i class="glyphicon glyphicon-map-marker"></i> Location</label> 
    <input class="form-control" id="location" name="location" type="text" ng-model="location" ng-required="true" ng-autocomplete details="details" options="options" placeholder="Location" /> 
    </div> 
    <div class="col-md-3"> 
    <label class="control-label" for="startDate"><i class="glyphicon glyphicon-calendar"></i> Pickup date</label> 
    <input class="form-control" id="startDate" name="startDate" type="text" datepicker-popup="{{format}}" ng-model="startDate" is-open="openedStart" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openStart($event)" /> 
    </div> 
    <div class="col-md-3"> 
    <label class="control-label" for="startTime"><i class="glyphicon glyphicon-time"></i> Pickup</label> 
    <select class="form-control" id="startTime" ng-model="selectedStartTime" ng-options="time.label for time in times" ng-required="true"> 
    </select> 
    </div> 

</div> 
<div class="row"> 
    <div class="col-md-3 col-md-offset-6"><label class="control-label" for="endDate"><i class="glyphicon glyphicon-calendar"></i> Dropoff date</label> 
    <input class="form-control" id="endDate" name="endDate" type="text" datepicker-popup="{{format}}" ng-model="endDate" is-open="openedEnd" min-date="startDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openEnd($event)" 
    /></div> 
    <div class="col-md-3"> <label class="control-label" for="endTime"><i class="glyphicon glyphicon-time"></i> Dropoff</label> 
    <select class="form-control" id="endTime" ng-model="selectedEndTime" ng-options="time.label for time in times" ng-required="true"> 
    </select></div> 
    </div> 
    <div class="row align-center"> 
    <input type="submit" value="Search" ng-disabled="form.$invalid" class="btn btn-primary" disabled="disabled" /> 
    </div> 
    </form> 
</div> 

現在一些最起碼的CSS的間距,並確保所有元素具有相同的行爲:

label{display:block} 
.control-label{padding-top:20px} 
.align-center{text-align:center; padding:20px} 
#location.form-control{width:100%} 
當然

可以它隨意的風格。你可以看到result here

相關問題