在特定方案中将两列彼此相邻放置

Question

我需要互相放两个coumns nex，而不是每个都有。我把空间分开了，他们有足够的空间，彼此相邻。我附上了一张照片，所以你可以看到我的想法。对象B必须前往我标记为新位置的位置。

@model HomeIndexViewModel

@{
    ViewData["Title"] = "Home Page";

}

<div class="container">
    <p class="headerText">Most Recent Movies</p>
    <div class="row">
        <div class="col-lg-10 movieTitleText">
            @foreach (var movie in Model.Movies)
            {
                <div class="col-md-4 movieTitleText">
                    <div>
                        <img src="~/images/@movie.ImageUrl" alt="Visual Studio" class="img-fluid" style="width: 100%; height:100px;" />
                        <h4 class="">@movie.Name <span class="ratingInTitleToRight">☆@movie.Rating</span></h4>
                        <div class="genreTitleTag">@movie.Genre</div>
                        <div class="">@movie.Storyline</div>
                        <a asp-area="" asp-controller="Movie" asp-action="Watchlist" asp-route-id="@movie.Name" class="text-warning genreTitleTag">+ Add to Watchlist</a>
                    </div>
                    @*<partial name="_HomeMoviePartial" model="movie" />*@
                </div>
            }
        </div>
        <div class="col-lg-2">
            <div class="well">
                <p>Place FOR NEWS</p>
            </div>
            <div class="well">
                <p>Place FOR NEWS</p>
            </div>
        </div>
    </div>
</div>

https://i.imgur.com/Emtx7JW.png

Answer 1

找到答案，你还需要一个，因为它需要把它们放到新的行中。

@model HomeIndexViewModel

@{
    ViewData["Title"] = "Home Page";

}

<div class="container">
    <p class="headerText">Most Recent Movies</p>
    <div class="row">
        <div class="col-lg-10 movieTitleText homeMovieList">
            <div class="row">
                @foreach (var movie in Model.Movies)
                {
                    <div class="col-lg-4 movieTitleText">
                        <div>
                            <img src="~/images/@movie.ImageUrl" alt="Visual Studio" class="img-fluid" style="width: 100%; height:100px;" />
                            <h4 class="">@movie.Name <span class="ratingInTitleToRight">☆@movie.Rating</span></h4>
                            <div class="genreTitleTag">@movie.Genre</div>
                            <div class="">@movie.Storyline</div>
                            <a asp-area="" asp-controller="Movie" asp-action="Watchlist" asp-route-id="@movie.Name" class="text-warning genreTitleTag">+ Add to Watchlist</a>
                        </div>
                        @*<partial name="_HomeMoviePartial" model="movie" />*@
                    </div>
                }
            </div>
        </div>
        <div class="col-lg-2">
            <div class="well">
                <p>Place FOR NEWS</p>
            </div>
            <div class="well">
                <p>Place FOR NEWS</p>
            </div>
        </div>
    </div>
</div>