2013-01-18 39 views
2

演示:http://jsfiddle.net/sunnycpp/MPACc/4/Form-inline元素之間爲什麼沒有空間?

相同的代碼複製粘貼此: HTML

<div class="container"> 
    <debug-bar ng-controller="parentController"> 
    <debug-bar ng-controller="childController"> 
     <debug-bar ng-controller="oneMoreChildController"></debug-bar> 
    </debug-bar> 
    <debug-bar ng-controller="oneMoreChildController"></debug-bar> 
    </debug-bar> 
</div> 

的Javascript

var angModule = angular.module('components', []); 
angModule.directive('debugBar', function() { 
    return { 
    restrict: 'E', 
    template: 
    '<div>'+ 
     '<form class="form-inline">' + 
      '<input type="text" class="input-small" ng-model="myText"/>' + 
      '<button class="btn btn-primary">Broadcast</button>' + 
      '<button class="btn btn-primary">Emit</button>' + 
     '</form>' + 
     '<div ng-transclude></div>'+ 
    '</div>', 
    transclude: true, 
    replace: true 
    }; 
}); 


function createController(myText) { 
    return function ($scope) { 
    $scope.myText = myText; 
    $scope.$on("event", function (senderText) { 
     console.log("Event received in:" + $scope.myText + " from Sender:" + senderText); 
    }); 
    $scope.$broadCastEvent = function() { 
     $scope.$broadcast("event", $scope.myText); 
     console.log("Sent event from:" + $scope.myText); 
    }; 
    }; 
} 

angModule.controller("parentController", createController("In parent")); 

angModule.controller("childController", createController("in FirstChild")); 

angModule.controller("oneMoreChildController", createController("in oneMoreChildController")); 
angModule.controller("oneMoreChildController", createController("in secondLevelChild")); 

回答

4

因爲你沒有定義任何。 :P的jsfiddle和引導重置邊距,您不定義任何...

定義一些利潤即可解決問題立即

input,button{ 
margin:0 5px; 
} 

Example

+0

那麼,爲什麼它工作在這種情況下,HTTP:/ /jsfiddle.net/sunnycpp/MPACc/12/? – SunnyShah

+0

@Sunny做到了嗎? http://jsfiddle.net/MPACc/13/ - 您在示例中看到的空間是內聯元素之間的換行符。沒有換行符,元素之間沒有空格。您需要手動設置邊距才能獲得一致的行爲。 – Christoph

+0

哦!好。非常感謝你澄清我的疑惑。 – SunnyShah

相關問題