Question

我遇到了一个问题，我知道解决方案应该非常简单，但到目前为止，我似乎无法找到实现这种特定行为的正确方法，基本上我是在尝试移动图像。另一个包含页面调整大小信息的div的顶部，我必须使用bootstrap。我已经尝试添加网格系统，例如col-md-6或col-md 12，但没有任何工作正如我想要的那样..

这是我的Plunker可以帮助我吗？提前谢谢！

PLUNKER

  internal bool AddKisiToDatabase(List<TapuKisiModel> kisiList)
    {
        using (ISession session = DatabaseProvider.SessionFactory.OpenSession())
        {
            using (ITransaction transaction = session.BeginTransaction())
            {
                try
                {
                    foreach (var kisi in kisiList)
                    {
                        TapuKisiModel currentKisi = session
                            .QueryOver<TapuKisiModel>()
                            .Where(x => x.TapuKod == kisi.TapuKod)
                            .SingleOrDefault();
                        if (currentKisi != null)
                        {

                            currentKisi.TapuKod = kisi.TapuKod;
                            foreach (var hisse in kisi.HisseBilgisi)
                            {
                                currentKisi.HisseBilgisi.Add(hisse);
                            }
                            session.Update(currentKisi);
                        }
                        else
                        {
                            session.Save(kisi);
                        }
                    }
                    transaction.Commit();
                    return true;
                }
                catch (Exception ex)
                {
                    SNLog.SLogger.Error(string.Format("{0} - {1}", "An Error Occurred While Adding tuzelKisiList To Database", ex.Message));
                    return false;
                }
            }
        }
    }

Answer 1

我认为这已经实现了您所寻求的目标：

Plunker Link

我用以下内容替换了你的stringLayoutOne代码：

stringLayoutOne += "<div class='row'><div class='col-md-5 col-sm-12'><img style='width: 300px; border: 1px solid' class='media-object' src='"+ data.news[0].img +"'></div><div style='border: 1px solid' class='col-md-7 col-sm-12'><h2 class='media-heading' style='border: 1px solid'>"+ data.news[0].title + "</h2>"+ data.news[0].body +"</div></div>";

在HTML中细分为：

<div class='row'>
  <div class='col-md-5 col-sm-12'>
    <img style='width: 300px; border: 1px solid' class='media-object' src='Your Image'>
  </div>
  <div style='border: 1px solid' class='col-md-7 col-sm-12'>
    <h2 class='media-heading' style='border: 1px solid'><!--data.news[0].title --></h2>
    <!-- data.news[0].body -->
  </div>
</div>

我还把你的顶级jumbotron放在一行，而不是在一个页面上使用多个容器，最好有一个容器和多行。

一般情况下，最好只尝试使用引导来控制布局，除非你绝对别无选择，并且只使用自己的样式进行外观修改（字体大小，颜色，边框等）。

Answer 2

尝试添加＆＃34; .row＆＃34;在它周围徘徊

http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

类似的东西：

<body>
        <div class="container">
            <div class="row">
                <div class="span12">
                    <div class="jumbotron">
                    <h1>Pagina news</h1>
                    </div>
                </div>
            </div>  
            <div class="row">
                <div class="span3">
                    <div class="container" id="newsLayoutOne">
                    </div>&nbsp
                </div>
                <div class="span3">
                    <div class="container" id="newsLayoutTwo">
                    </div>&nbsp
                </div>
                <div class="span3">
                    <div class="container" id="newsLayoutThree">
                    </div>&nbsp
                </div>
                <div class="span3">
                    <div class="container" id="newsLayoutFour">
                    </div>&nbsp
                </div>
            </div>
        </div>
    </body>

Answer 3

一般来说，你应该有一个容器。你在里面添加一行。在里面添加列。

说，你有一行有两列，图像和内容。诀窍是将多个依赖于屏幕大小的列类分配给同一列。在这种情况下，在调整大小期间，它将选择相应的类并将重新转换div，以便在一个视觉行中不超过12个网格列。

Container div
   Row div
       Image div: col-sm-12, col-md-4
       Content div: col-sm-12, col-md-8

Bootstrap：在调整大小时在另一个div下移动一个div？

3 个答案: