Question

我试图在js小提琴中创建三个相等的列，并且出于某种原因它们显示为单独的行。我做错了什么？

<div class="container">
  <div class="row">

    <div class="col-md-4">
      cczfsd
    </div>

    <div class="col-md-4">
      sfdfds
    </div>

    <div class="col-md-4">
      sdfssd
    </div>

 </div>
</div>

Answer 1

在这种情况下，弹性显示会派上用场。

.row {
    display:flex;
}

CSS

This is the controller
$scope.dummyData = NetworkDisplay.getHospitals();
        console.log($scope.dummyData.inviteToNetwork);
        if ($scope.dummyData.inviteToNetwork) {
          $ionicModal.fromTemplateUrl('templates/network/modal.html', {
            scope: $scope,
            animation: 'slide-in-up'
          }).then(function(modal) {
              $scope.modal = modal;
              $scope.modal.show();
              console.log($scope.dummyData);
              $scope.ok = function(data) {
                for (var i = 0; i < data.length; i++) {
                  if (data[i].checked === true)
                    HospitalsNetwork.set(data[i]);
                  //  console.log(data[i].checked);
                }

                $scope.modal.remove();
                $state.go('tab.networks');
              };

              $scope.cancel = function() {
                $scope.modal.remove();
                $state.go('tab.dashboard');
              };

Answer 2

在 fidlle

中添加引导程序

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

然后重新调整输出框的大小。按预期工作。

Answer 3

如果您不使用boostrap，请添加以下css以获得正确的输出。

.col-md-4 {
width: 33.3333%;
float:left;

}

JsFiddle

Answer 4

确保你是否在html中正确包含了bootstrap css，否则检查链接是否正常工作。

Answer 5

嗨，因为您的桌面屏幕正常工作，它无法用于移动设备，平板电脑和其他小型分辨率设备，因此您无法完成输出

我认为没有再次包含bootstrap的css的问题，因为它已经加载了我认为问题在于明智地管理屏幕

这里是您想要输出的代码，请查看'

.temp{
    background-color:#e2e2e2;
    border:1px solid grey;
}

<div class="container">
  <div class="row">

    <div class="col-md-4 col-xs-4 col-sm-4 temp">
      cczfsd
    </div>

    <div class="col-md-4 col-xs-4 col-sm-4 temp">
      sfdfds
    </div>

    <div class="col-md-4 col-xs-4 col-sm-4 temp">
      sdfssd
    </div>

 </div>
</div>

以下是此

的演示工作代码

<强> DEMO CODE

如何获得三个等宽列？

5 个答案: